/*--------------------------------------------------------------------- File Name: style.css?v1 ---------------------------------------------------------------------*/

:root {
     --color1: #D90416;
     --color2: #D91438;
     --color3: #023373;
     --color4: #042959;
     --color5: #0d0d0d;

     --card: #161512;
     --border: #252320;
     --text: #ede8df;
     --muted: #7a7265;
     --soft: #3a3630;
}

/*--------------------------------------------------------------------- import Fonts ---------------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css?family=Rajdhani:300,400,500,600,700');
@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
@import url('https://fonts.googleapis.com/css?family=Raleway:100,400,600,700,900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Baloo+Chettan&display=swap');

/*****---------------------------------------- 1) font-family: 'Rajdhani', sans-serif;
 2) font-family: 'Poppins', sans-serif;
 ----------------------------------------*****/


/*--------------------------------------------------------------------- import Files ---------------------------------------------------------------------*/

@import url(animate.min.css?v1);
@import url(normalize.css?v1);
@import url(icomoon.css?v1);
@import url(font-awesome.min.css?v1);
@import url(meanmenu.css?v1);
@import url(owl.carousel.min.css?v1);
@import url(swiper.min.css?v1);
@import url(slick.css?v1);
@import url(jquery.fancybox.min.css?v1);
@import url(jquery-ui.css?v1);
@import url(nice-select.css?v1);

/*--------------------------------------------------------------------- skeleton ---------------------------------------------------------------------*/

* {
     box-sizing: border-box !important;
}

.container {
     max-width: 1170px;
}

html {
     scroll-behavior: smooth;
}

body {
     color: #666666;
     font-size: 14px;
     font-family: 'Poppins', sans-serif;
     line-height: 1.80857;
     font-weight: normal;
}

a {
     color: #1f1f1f;
     text-decoration: none !important;
     outline: none !important;
     -webkit-transition: all .3s ease-in-out;
     -moz-transition: all .3s ease-in-out;
     -ms-transition: all .3s ease-in-out;
     -o-transition: all .3s ease-in-out;
     transition: all .3s ease-in-out;
}

h1,
h2,
h3,
h4,
h5,
h6 {
     letter-spacing: 0;
     font-weight: normal;
     position: relative;
     padding: 0 0 10px 0;
     font-weight: normal;
     line-height: normal;
     color: #111111;
     margin: 0
}

h1 {
     font-size: 24px;
}

h2 {
     font-size: 22px;
}

h3 {
     font-size: 18px;
}

h4 {
     font-size: 16px
}

h5 {
     font-size: 14px
}

h6 {
     font-size: 13px
}

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

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
     color: #212121;
     text-decoration: none !important;
     opacity: 1
}

button:focus {
     outline: none;
}

ul,
li,
ol {
     margin: 0px;
     padding: 0px;
     list-style: none;
}

p {
     margin: 0px;
     font-weight: 500;
     font-size: 15px;
     line-height: 24px;
}

a {
     color: #222222;
     text-decoration: none;
     outline: none !important;
}

a,
.btn {
     text-decoration: none !important;
     outline: none !important;
     -webkit-transition: all .3s ease-in-out;
     -moz-transition: all .3s ease-in-out;
     -ms-transition: all .3s ease-in-out;
     -o-transition: all .3s ease-in-out;
     transition: all .3s ease-in-out;
}

img {
     max-width: 100%;
     height: auto;
}

:focus {
     outline: 0;
}

.btn-custom {
     margin-top: 20px;
     background-color: transparent !important;
     border: 2px solid #ddd;
     padding: 12px 40px;
     font-size: 16px;
}

.lead {
     font-size: 18px;
     line-height: 30px;
     color: #767676;
     margin: 0;
     padding: 0;
}

.form-control:focus {
     border-color: #ffffff !important;
     box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .25);
}

.navbar-form input {
     border: none !important;
}

.badge {
     font-weight: 500;
}

blockquote {
     margin: 20px 0 20px;
     padding: 30px;
}

button {
     border: 0;
     margin: 0;
     padding: 0;
     cursor: pointer;
}

.full {
     float: left;
     width: 100%;
}

.full {
     width: 100%;
     float: left;
     margin: 0;
     padding: 0;
}


/**-- heading section --**/


/*---------------------------- preloader area ----------------------------*/

.loader_bg {
     position: fixed;
     z-index: 9999999;
     background: #fff;
     width: 100%;
     height: 100%;
}

.loader {
     height: 100%;
     width: 100%;
     position: absolute;
     left: 0;
     top: 0;
     display: flex;
     justify-content: center;
     align-items: center;
}

.loader img {
     width: 280px;
}


/* ══════════════════════════════════════
       HERO
    ══════════════════════════════════════ */

.hero {
     position: relative;
     height: 100vh;
     min-height: 680px;
     overflow: hidden;
     display: flex;
     align-items: flex-end;
}

.hero-slides {
     position: absolute;
     inset: 0;
}

.hero-slide {
     position: absolute;
     inset: 0;
     background-size: cover;
     background-position: center;
     opacity: 0;
     transition: opacity 1.2s ease;
     filter: brightness(0.4) saturate(0.6);
}

.hero-slide.active {
     opacity: 1;
}

.hero-slide:nth-child(1) {
     background-image: url('https://motelconcorde.com/images/banner1.jpg');
     background-position: center center;
}

.hero-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg,
               rgba(8, 8, 7, 0.6) 0%,
               transparent 60%,
               rgba(8, 8, 7, 0.3) 100%),
          linear-gradient(to top, var(--bg) 0%, transparent 40%);
}

.hero-content {
     position: relative;
     z-index: 2;
     padding: 0 52px 90px;
     max-width: 820px;
}

.hero-eyebrow {
     display: inline-flex;
     align-items: center;
     gap: 12px;
     padding-right: 10px;
     font-size: 10px;
     font-weight: bolder;
     letter-spacing: 0.4em;
     text-transform: uppercase;
     color: #ffffff;
     background-color: var(--color3);
     margin-bottom: 20px;
     opacity: 0;
     animation: fadeUp 0.7s 0.3s ease forwards;
}

.hero-eyebrow::before {
     content: '';
     display: block;
     width: 32px;
     height: 1px;
     background: var(--gold);
}

.hero-title {
     font-size: clamp(54px, 8vw, 108px);
     font-weight: 300;
     line-height: 0.92;
     color: var(--text);
     opacity: 0;
     animation: fadeUp 0.8s 0.5s ease forwards;
}

.hero-title em {
     font-style: italic;
     color: var(--color2);
}

.hero-desc {
     margin-top: 24px;
     font-size: 15px;
     color: rgba(237, 232, 223, 0.55);
     line-height: 1.7;
     max-width: 440px;
     opacity: 0;
     animation: fadeUp 0.7s 0.8s ease forwards;
}

.hero-actions {
     display: flex;
     align-items: center;
     gap: 20px;
     margin-top: 40px;
     opacity: 0;
     animation: fadeUp 0.7s 1s ease forwards;
}

.btn-primary {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     background: var(--color2);
     color: var(--color5);
     font-family: 'DM Sans', sans-serif;
     font-size: 11px;
     font-weight: 500;
     letter-spacing: 0.25em;
     text-transform: uppercase;
     padding: 16px 32px;
     text-decoration: none;
     border: none;
     cursor: pointer;
     transition: background 0.2s, transform 0.2s;
}

.btn-primary:hover {
     background: var(--color4);
     transform: translateY(-2px);
}

.btn-ghost {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     font-size: 11px;
     font-weight: 500;
     letter-spacing: 0.2em;
     text-transform: uppercase;
     color: var(--text);
     text-decoration: none;
     border: none;
     background: none;
     cursor: pointer;
     transition: color 0.2s;
}

.btn-ghost:hover {
     color: var(--text);
}

/* slide dots */
.hero-dots {
     position: absolute;
     bottom: 40px;
     right: 52px;
     z-index: 3;
     display: flex;
     gap: 8px;
}

.dot {
     width: 24px;
     height: 2px;
     background: rgba(255, 255, 255, 0.25);
     cursor: pointer;
     transition: background 0.3s, width 0.3s;
}

.dot.active {
     background: var(--gold);
     width: 40px;
}

/* scroll line */
.hero-scroll-line {
     position: absolute;
     bottom: 0;
     left: 52px;
     width: 1px;
     height: 80px;
     background: linear-gradient(to bottom, var(--gold), transparent);
     opacity: 0;
     animation: fadeIn 1s 1.5s ease forwards;
}

@keyframes fadeUp {
     from {
          opacity: 0;
          transform: translateY(22px);
     }

     to {
          opacity: 1;
          transform: translateY(0);
     }
}

@keyframes fadeIn {
     to {
          opacity: 1;
     }
}


/* ══════════════════════════════════════
       STATS BAR
    ══════════════════════════════════════ */
.stats-bar {
     background: var(--card);
     border-top: 1px solid var(--border);
     border-bottom: 1px solid var(--border);
     display: grid;
     grid-template-columns: repeat(4, 1fr);
}

.stat-item {
     padding: 32px 40px;
     border-right: 1px solid var(--border);
     display: flex;
     flex-direction: column;
     gap: 6px;
}

.stat-item:last-child {
     border-right: none;
}

.stat-number {
     font-size: 42px;
     font-weight: 300;
     color: var(--color1);
     line-height: 1;
}

.stat-label {
     font-size: 11px;
     letter-spacing: 0.15em;
     text-transform: uppercase;
     color: var(--muted);
}

/* ══════════════════════════════════════
       SECTION COMMONS
    ══════════════════════════════════════ */
.section-wrap {
     max-width: 1320px;
     margin: 0 auto;
     padding: 96px 52px;
}

.section-label {
     display: flex;
     align-items: center;
     gap: 16px;
     margin-bottom: 12px;
}

.section-label span {
     font-size: 10px;
     font-weight: 500;
     letter-spacing: 0.4em;
     text-transform: uppercase;
     color: var(--color3);
}

.section-label::after {
     content: '';
     flex: 1;
     height: 1px;
     background: var(--border);
}

.section-heading {
     font-size: clamp(36px, 4vw, 58px);
     font-weight: 300;
     line-height: 1.05;
     color: var(--color5);
     margin-bottom: 16px;
}

.section-heading em {
     font-style: italic;
     color: var(--color2);
}

.section-sub {
     font-size: 14px;
     color: var(--muted);
     line-height: 1.7;
     max-width: 460px;
     margin-bottom: 56px;
}

/* ══════════════════════════════════════
       HABITACIONES GRID
    ══════════════════════════════════════ */
.rooms-section {
     background: var(--bg);
}

/* layout: 3 col top, 4 col bottom */
.rooms-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-template-rows: auto auto;
     gap: 2px;
     background: var(--border);
     border: 1px solid var(--border);
}

/* last row: 4 cards → span trick */
.rooms-grid .room-card:nth-child(4) {
     grid-column: span 1;
}

.room-card {
     background: var(--card);
     display: flex;
     flex-direction: column;
     text-decoration: none;
     color: inherit;
     position: relative;
     overflow: hidden;
     cursor: pointer;
     opacity: 0;
     transform: translateY(20px);
     transition: background 0.3s;
     animation: cardReveal 0.5s ease forwards;
}

.room-card:nth-child(1) {
     animation-delay: 0.05s;
}

.room-card:nth-child(2) {
     animation-delay: 0.12s;
}

.room-card:nth-child(3) {
     animation-delay: 0.19s;
}

.room-card:nth-child(4) {
     animation-delay: 0.26s;
}

.room-card:nth-child(5) {
     animation-delay: 0.33s;
}

.room-card:nth-child(6) {
     animation-delay: 0.40s;
}

.room-card:nth-child(7) {
     animation-delay: 0.47s;
}

@keyframes cardReveal {
     to {
          opacity: 1;
          transform: translateY(0);
     }
}

.room-card:hover {
     background: #1c1a16;
}

.room-card:hover .room-img img {
     transform: scale(1.07);
     filter: brightness(0.85) saturate(0.85);
}

.room-img {
     height: 220px;
     overflow: hidden;
     position: relative;
}

.room-img img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     filter: brightness(0.72) saturate(0.65);
     transition: transform 0.6s ease, filter 0.4s ease;
}

.room-img::after {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(to bottom, transparent 50%, var(--card) 100%);
}

.room-badge {
     position: absolute;
     top: 14px;
     left: 14px;
     z-index: 2;
     font-size: 9px;
     font-weight: 500;
     letter-spacing: 0.25em;
     text-transform: uppercase;
     background: var(--color2);
     color: #ffffff;
     padding: 4px 10px;
}

.room-body {
     flex: 1;
     padding: 22px 26px 26px;
     display: flex;
     flex-direction: column;
}

.room-num {
     font-size: 10px;
     letter-spacing: 0.3em;
     color: var(--gold-dim);
     margin-bottom: 6px;
}

.room-name {
     font-family: 'Cormorant Garamond', serif;
     font-size: 22px;
     font-weight: 400;
     color: var(--text);
     margin-bottom: 8px;
}

.room-desc {
     font-size: 13px;
     color: var(--muted);
     line-height: 1.65;
     flex: 1;
}

.room-tags {
     display: flex;
     flex-wrap: wrap;
     gap: 5px;
     margin-top: 14px;
}

.room-tag {
     font-size: 9px;
     letter-spacing: 0.1em;
     text-transform: uppercase;
     color: var(--muted);
     border: 1px solid var(--border);
     padding: 3px 8px;
}

.room-footer {
     margin-top: 18px;
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
     gap: 10px;
}

.room-price {
     font-family: 'Cormorant Garamond', serif;
     font-size: 28px;
     color: var(--gold-lt);
     line-height: 1;
}

.room-price span {
     font-family: 'DM Sans', sans-serif;
     font-size: 11px;
     color: var(--muted);
     font-weight: 300;
}

.room-btn {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     font-size: 10px;
     font-weight: 500;
     letter-spacing: 0.18em;
     text-transform: uppercase;
     color: var(--color5);
     background: var(--color2);
     border: none;
     padding: 10px 16px;
     cursor: pointer;
     transition: background 0.2s;
}

.room-btn:hover {
     background: var(--color4);
     color: #ffffff
}

/* bottom row of 4 */
.rooms-bottom-row {
     grid-column: 1 / -1;
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 2px;
     background: var(--border);
}

.rooms-bottom-row .room-card {
     border: none;
}

.rooms-bottom-row .room-img {
     height: 180px;
}

/* ══════════════════════════════════════
       EXPERIENCE STRIP
    ══════════════════════════════════════ */
.exp-strip {
     background: var(--card);
     border-top: 1px solid var(--border);
     border-bottom: 1px solid var(--border);
     display: grid;
     grid-template-columns: repeat(3, 1fr);
}

.exp-item {
     padding: 48px 44px;
     border-right: 1px solid var(--border);
     display: flex;
     flex-direction: column;
     gap: 14px;
}

.exp-item:last-child {
     border-right: none;
}

.exp-icon {
     font-size: 28px;
}

.exp-title {
     font-family: 'Cormorant Garamond', serif;
     font-size: 22px;
     font-weight: 400;
     color: var(--text);
}

.exp-text {
     font-size: 13px;
     color: var(--muted);
     line-height: 1.7;
}

/* ══════════════════════════════════════
       UBICACIÓN
    ══════════════════════════════════════ */
.location-section {
     background: var(--surface);
     border-top: 1px solid var(--border);
}

.location-wrap {
     max-width: 1320px;
     margin: 0 auto;
     padding: 96px 52px;
     display: grid;
     grid-template-columns: 1fr 1.4fr;
     gap: 60px;
     align-items: start;
}

.location-info {}

.location-detail {
     display: flex;
     flex-direction: column;
     gap: 3px;
     margin-bottom: 36px;
}

.loc-row {
     display: flex;
     align-items: flex-start;
     gap: 16px;
     padding: 16px 20px;
     background: var(--card);
     border: 1px solid var(--border);
}

.loc-icon {
     font-size: 18px;
     flex-shrink: 0;
     margin-top: 2px;
}

.loc-label {
     font-size: 10px;
     letter-spacing: 0.2em;
     text-transform: uppercase;
     color: var(--muted);
     display: block;
     margin-bottom: 3px;
}

.loc-value {
     font-size: 14px;
     color: var(--text);
     font-weight: 400;
}

.loc-value a {
     color: var(--text);
     text-decoration: none;
}

.loc-value a:hover {
     color: var(--gold-lt);
}

.open-pill {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     font-size: 11px;
     letter-spacing: 0.15em;
     text-transform: uppercase;
     color: #5ecb5e;
     background: rgba(94, 203, 94, 0.08);
     border: 1px solid rgba(94, 203, 94, 0.25);
     padding: 8px 16px;
     margin-bottom: 28px;
}

.open-dot {
     width: 7px;
     height: 7px;
     border-radius: 50%;
     background: #5ecb5e;
     animation: blink 2s ease-in-out infinite;
}

@keyframes blink {

     0%,
     100% {
          opacity: 1;
          transform: scale(1);
     }

     50% {
          opacity: 0.4;
          transform: scale(0.7);
     }
}

.map-container {
     position: relative;
     height: 440px;
     border: 1px solid var(--border);
     overflow: hidden;
}

.map-container iframe {
     width: 100%;
     height: 100%;
     border: none;
     filter: invert(90%) hue-rotate(180deg) brightness(0.85) saturate(0.7);
}

.map-overlay-badge {
     position: absolute;
     bottom: 16px;
     left: 16px;
     background: var(--card);
     border: 1px solid var(--border);
     padding: 12px 18px;
     display: flex;
     align-items: center;
     gap: 10px;
     font-size: 13px;
     color: var(--text);
     pointer-events: none;
}

.map-overlay-badge span {
     font-size: 18px;
}

/* ══════════════════════════════════════
       QUEJAS BANNER
    ══════════════════════════════════════ */
.quejas-section {
     background: var(--card);
     border-top: 1px solid var(--border);
     border-bottom: 1px solid var(--border);
}

.quejas-wrap {
     max-width: 1320px;
     margin: 0 auto;
     padding: 72px 52px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 40px;
}

.quejas-left {
     max-width: 600px;
}

.quejas-eyebrow {
     font-size: 10px;
     font-weight: 500;
     letter-spacing: 0.4em;
     text-transform: uppercase;
     color: var(--gold);
     margin-bottom: 14px;
     display: flex;
     align-items: center;
     gap: 12px;
}

.quejas-eyebrow::before {
     content: '';
     display: block;
     width: 28px;
     height: 1px;
     background: var(--gold-dim);
}

.quejas-title {
     font-family: 'Cormorant Garamond', serif;
     font-size: clamp(28px, 3vw, 44px);
     font-weight: 300;
     color: var(--text);
     line-height: 1.1;
     margin-bottom: 14px;
}

.quejas-title em {
     font-style: italic;
     color: var(--gold-lt);
}

.quejas-desc {
     font-size: 14px;
     color: var(--muted);
     line-height: 1.7;
     margin-bottom: 24px;
}

.quejas-bullets {
     display: flex;
     flex-wrap: wrap;
     gap: 10px 28px;
}

.quejas-bullet {
     font-size: 12px;
     color: var(--muted);
     display: flex;
     align-items: center;
     gap: 8px;
}

.quejas-bullet::before {
     content: '✓';
     color: var(--gold);
     font-size: 11px;
}

.quejas-right {
     flex-shrink: 0;
}

.btn-quejas-big {
     display: flex;
     align-items: center;
     gap: 12px;
     background: transparent;
     border: 1px solid var(--color2);
     color: var(--color2);
     font-family: 'DM Sans', sans-serif;
     font-size: 11px;
     font-weight: 500;
     letter-spacing: 0.25em;
     text-transform: uppercase;
     padding: 20px 36px;
     cursor: pointer;
     text-decoration: none;
     transition: border-color 0.25s, background 0.25s;
     white-space: nowrap;
     position: relative;
     overflow: hidden;
}

.btn-quejas-big::before {
     content: '';
     position: absolute;
     inset: 0;
     background: var(--gold-dim);
     transform: translateX(-100%);
     transition: transform 0.3s ease;
}

.btn-quejas-big:hover {
     border-color: var(--gold);
}

.btn-quejas-big:hover::before {
     transform: translateX(0);
}

.btn-quejas-big span,
.btn-quejas-big svg {
     position: relative;
     z-index: 1;
}

.quejas-divider {
     width: 1px;
     height: 80px;
     background: var(--border);
     flex-shrink: 0;
}

/* ══ MAIN ══ */

/* ══ HERO STRIP ══ */
.hero-strip {
     position: relative;
     height: 420px;
     overflow: hidden;
     margin-top: 0;
}

.hero-strip-bg {
     position: absolute;
     inset: 0;
     background-image: url('https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=1800&q=80');
     background-size: cover;
     background-position: center 40%;
     filter: brightness(0.3) saturate(0.5);
     transform: scale(1.05);
     animation: zoomIn 10s ease forwards;
}

@keyframes zoomIn {
     to {
          transform: scale(1);
     }
}

.hero-strip-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(to bottom,
               rgba(8, 8, 7, 0.5) 0%,
               transparent 40%,
               transparent 55%,
               var(--bg) 100%);
}

.hero-strip-content {
     position: relative;
     z-index: 2;
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     padding: 0 52px 56px;
}

.hero-eyebrow {
     font-size: 10px;
     font-weight: bolder;
     letter-spacing: 0.4em;
     text-transform: uppercase;
     color: #ffffff;
     margin-bottom: 14px;
     display: flex;
     align-items: center;
     gap: 12px;
     opacity: 0;
     animation: fadeUp 0.6s 0.2s ease forwards;
}

.hero-eyebrow::before {
     content: '';
     width: 28px;
     height: 1px;
     background: var(--gold);
}

.hero-title {
     font-family: 'Cormorant Garamond', serif;
     font-size: clamp(44px, 7vw, 84px);
     font-weight: 300;
     line-height: 0.95;
     color: var(--text);
     opacity: 0;
     animation: fadeUp 0.7s 0.4s ease forwards;
}

.hero-title em {
     font-style: italic;
     color: var(--gold-lt);
}

.hero-sub {
     margin-top: 16px;
     font-size: 14px;
     color: rgba(237, 232, 223, 0.5);
     letter-spacing: 0.05em;
     opacity: 0;
     animation: fadeUp 0.7s 0.6s ease forwards;
}

@keyframes fadeUp {
     from {
          opacity: 0;
          transform: translateY(18px);
     }

     to {
          opacity: 1;
          transform: translateY(0);
     }
}


.main-wrap {
     max-width: 1300px;
     margin: 0 auto;
     padding: 64px 52px 100px;
}

/* ══ CATEGORY BLOCK ══ */
.category-block {
     margin-bottom: 80px;
     display: none;
}

.category-block.visible {
     display: block;
}

.cat-header {
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
     margin-bottom: 36px;
     padding-bottom: 20px;
     border-bottom: 1px solid var(--border);
     gap: 20px;
}

.cat-title-group {}

.cat-label {
     font-size: 10px;
     font-weight: 500;
     letter-spacing: 0.4em;
     text-transform: uppercase;
     color: var(--color5);
     margin-bottom: 8px;
}

.cat-title {
     font-family: 'Cormorant Garamond', serif;
     font-size: clamp(30px, 3.5vw, 48px);
     font-weight: 300;
     color: var(--color4);
     line-height: 1;
}

.cat-title em {
     font-style: italic;
     color: var(--color1);
}

.cat-desc {
     font-size: 13px;
     color: var(--muted);
     max-width: 340px;
     line-height: 1.6;
     text-align: right;
}

/* ══ PRODUCT GRID ══ */
.product-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
     gap: 2px;
     background: var(--border);
     border: 1px solid var(--border);
}

/* ══ PRODUCT CARD ══ */
.product-card {
     background: var(--card);
     display: flex;
     flex-direction: column;
     position: relative;
     overflow: hidden;
     transition: background 0.3s;
     animation: cardIn 0.4s ease both;
}

@keyframes cardIn {
     from {
          opacity: 0;
          transform: translateY(16px);
     }

     to {
          opacity: 1;
          transform: translateY(0);
     }
}

.product-card:nth-child(1) {
     animation-delay: 0.04s;
}

.product-card:nth-child(2) {
     animation-delay: 0.08s;
}

.product-card:nth-child(3) {
     animation-delay: 0.12s;
}

.product-card:nth-child(4) {
     animation-delay: 0.16s;
}

.product-card:nth-child(5) {
     animation-delay: 0.20s;
}

.product-card:nth-child(6) {
     animation-delay: 0.24s;
}

.product-card:nth-child(7) {
     animation-delay: 0.28s;
}

.product-card:nth-child(8) {
     animation-delay: 0.32s;
}

.product-card:nth-child(9) {
     animation-delay: 0.36s;
}

.product-card:nth-child(10) {
     animation-delay: 0.40s;
}

.product-card:hover {
     background: var(--card2);
}

.product-card:hover .prod-img img {
     transform: scale(1.07);

}

/* FEATURED card spans 2 cols */
.product-card.featured {
     grid-column: span 2;
     flex-direction: row;
}

.product-card.featured .prod-img {
     width: 48%;
     height: auto;
     flex-shrink: 0;
}

.product-card.featured .prod-body {
     justify-content: center;
     padding: 36px 32px;
}

.prod-img {
     height: 200px;
     overflow: hidden;
     position: relative;
     flex-shrink: 0;
}

.prod-img img {
     width: 100%;
     height: 100%;
     object-fit: cover;
}

.prod-badge {
     position: absolute;
     top: 12px;
     left: 12px;
     z-index: 2;
     font-size: 9px;
     font-weight: 500;
     letter-spacing: 0.2em;
     text-transform: uppercase;
     padding: 4px 10px;
}

.badge-popular {
     background: var(--gold);
     color: var(--bg);
}

.badge-nuevo {
     background: #2a6e3a;
     color: #8de8a0;
}

.badge-hot {
     background: #7a1f1f;
     color: #f4a0a0;
}

.prod-body {
     flex: 1;
     padding: 20px 22px 22px;
     display: flex;
     flex-direction: column;
}

.prod-cat-dot {
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: var(--gold);
     margin-bottom: 10px;
}

.prod-name {
     font-family: 'Cormorant Garamond', serif;
     font-size: 20px;
     font-weight: 400;
     color: var(--text);
     line-height: 1.2;
     margin-bottom: 7px;
}

.prod-desc {
     font-size: 12px;
     color: var(--muted);
     line-height: 1.65;
     flex: 1;
}

.prod-tags {
     display: flex;
     flex-wrap: wrap;
     gap: 5px;
     margin-top: 12px;
}

.prod-tag {
     font-size: 9px;
     letter-spacing: 0.1em;
     text-transform: uppercase;
     color: var(--muted);
     border: 1px solid var(--border);
     padding: 3px 7px;
}

.prod-footer {
     margin-top: 16px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 8px;
     padding-top: 14px;
     border-top: 1px solid var(--border);
}

.prod-price {
     font-family: 'Cormorant Garamond', serif;
     font-size: 26px;
     color: #ffffff;
     line-height: 1;
}

.prod-price small {
     font-family: 'DM Sans', sans-serif;
     font-size: 11px;
     color: var(--muted);
     font-weight: 300;
}

.prod-time {
     font-size: 10px;
     color: var(--muted);
     letter-spacing: 0.1em;
     display: flex;
     align-items: center;
     gap: 4px;
}

/* ══ DIVIDER ══ */
.section-divider {
     display: flex;
     align-items: center;
     gap: 20px;
     margin: 72px 0 64px;
}

.section-divider::before,
.section-divider::after {
     content: '';
     flex: 1;
     height: 1px;
     background: var(--color2);
}

.section-divider span {
     font-size: 10px;
     letter-spacing: 0.3em;
     text-transform: uppercase;
     color: var(--gold-dim);
}

/* ══ NOTICE BANNER ══ */
.notice-banner {
     background: var(--card);
     border: 1px solid var(--border);
     border-left: 3px solid var(--gold);
     padding: 20px 28px;
     display: flex;
     align-items: flex-start;
     gap: 16px;
     margin-bottom: 48px;
}

.notice-banner .notice-icon {
     font-size: 20px;
     flex-shrink: 0;
     margin-top: 1px;
}

.notice-banner p {
     font-size: 13px;
     color: var(--muted);
     line-height: 1.6;
}

.notice-banner strong {
     color: var(--text);
     font-weight: 400;
}

/* ══ EMPTY STATE ══ */
.empty-state {
     display: none;
     text-align: center;
     padding: 80px 24px;
}

.empty-state.show {
     display: block;
}

.empty-state p {
     font-family: 'Cormorant Garamond', serif;
     font-size: 28px;
     color: var(--muted);
     font-weight: 300;
}


/* ══════════════════════════════════════
       FOOTER
    ══════════════════════════════════════ */
footer {
     background: var(--surface);
     border-top: 1px solid var(--border);
}

.footer-top {
     max-width: 1320px;
     margin: 0 auto;
     padding: 72px 52px 56px;
     display: grid;
     grid-template-columns: 1.6fr 1fr 1fr 1fr;
     gap: 48px;
}

.footer-brand {}

.footer-logo {
     font-family: 'Cormorant Garamond', serif;
     font-size: 28px;
     font-weight: 300;
     letter-spacing: 0.22em;
     color: var(--gold-lt);
     display: block;
     margin-bottom: 14px;
}

.footer-tagline {
     font-size: 13px;
     color: var(--muted);
     line-height: 1.7;
     margin-bottom: 28px;
     max-width: 260px;
}

.social-icons {
     display: flex;
     gap: 8px;
}

.social-icon-link {
     width: 40px;
     height: 40px;
     border: 1px solid var(--border);
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--muted);
     text-decoration: none;
     transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.social-icon-link:hover {
     border-color: var(--gold-dim);
     color: var(--gold-lt);
     background: rgba(184, 150, 90, 0.07);
}

.social-icon-link svg {
     width: 17px;
     height: 17px;
}

.footer-col h4 {
     font-size: 10px;
     font-weight: 500;
     letter-spacing: 0.3em;
     text-transform: uppercase;
     color: var(--gold);
     margin-bottom: 20px;
}

.footer-col ul {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: 10px;
}

.footer-col ul li a {
     font-size: 13px;
     color: var(--muted);
     text-decoration: none;
     transition: color 0.2s;
     display: inline-flex;
     align-items: center;
     gap: 6px;
}

.footer-col ul li a:hover {
     color: var(--gold-lt);
}

.footer-col ul li a::before {
     content: '';
     display: block;
     width: 12px;
     height: 1px;
     background: var(--border);
     transition: background 0.2s, width 0.2s;
}

.footer-col ul li a:hover::before {
     background: var(--gold);
     width: 16px;
}

.footer-contact {
     font-size: 13px;
     color: var(--muted);
     line-height: 2;
}

.footer-contact a {
     color: var(--muted);
     text-decoration: none;
     transition: color 0.2s;
}

.footer-contact a:hover {
     color: var(--gold-lt);
}

.footer-bottom {
     border-top: 1px solid var(--border);
     max-width: 1320px;
     margin: 0 auto;
     padding: 20px 52px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 20px;
}

.footer-bottom p {
     font-size: 11px;
     color: var(--muted);
     letter-spacing: 0.05em;
}

.footer-bottom-links {
     display: flex;
     gap: 24px;
}

.footer-bottom-links a {
     font-size: 11px;
     color: var(--muted);
     text-decoration: none;
     letter-spacing: 0.05em;
     transition: color 0.2s;
}

.footer-bottom-links a:hover {
     color: var(--gold-lt);
}

/* ══ QUEJAS & RECLAMOS ══ */
/* ══ PAGE LAYOUT ══ */
.page-wrap {
     position: relative;
     z-index: 1;
     max-width: 1200px;
     margin: 0 auto;
     padding: 120px 52px 100px;
     display: grid;
     grid-template-columns: 1fr 420px;
     gap: 64px;
     align-items: start;
}

/* ══ LEFT COLUMN ══ */
.left-col {}

/* Header */
.page-header {
     margin-bottom: 52px;
}

.page-eyebrow {
     display: inline-flex;
     align-items: center;
     gap: 12px;
     font-size: 10px;
     font-weight: 500;
     letter-spacing: 0.4em;
     text-transform: uppercase;
     color: var(--color3);
     margin-bottom: 20px;
     opacity: 0;
     animation: fadeUp 0.6s 0.1s ease forwards;
}

.page-eyebrow::before {
     content: '';
     width: 28px;
     height: 1px;
     background: var(--color4);
}

.page-title {
     font-family: 'Cormorant Garamond', serif;
     font-size: clamp(42px, 5vw, 72px);
     font-weight: 300;
     line-height: 0.95;
     color: var(--color4);
     opacity: 0;
     animation: fadeUp 0.7s 0.2s ease forwards;
}

.page-title em {
     font-style: italic;
     color: var(--color1);
}

.page-desc {
     margin-top: 18px;
     font-size: 14px;
     color: var(--muted);
     line-height: 1.8;
     max-width: 460px;
     opacity: 0;
     animation: fadeUp 0.7s 0.35s ease forwards;
}

@keyframes fadeUp {
     from {
          opacity: 0;
          transform: translateY(18px);
     }

     to {
          opacity: 1;
          transform: translateY(0);
     }
}

/* ══ COMMITMENTS ══ */
.commitments {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 2px;
     background: var(--border);
     border: 1px solid var(--border);
     margin-bottom: 48px;
     opacity: 0;
     animation: fadeUp 0.7s 0.45s ease forwards;
}

.commitment-item {
     background: var(--card);
     padding: 24px 22px;
     display: flex;
     align-items: flex-start;
     gap: 14px;
     transition: background 0.25s;
}

.commitment-item:hover {
     background: var(--card2);
}

.commit-icon {
     font-size: 22px;
     flex-shrink: 0;
     margin-top: 2px;
}

.commit-title {
     font-size: 13px;
     font-weight: 500;
     color: var(--text);
     margin-bottom: 4px;
     letter-spacing: 0.02em;
}

.commit-desc {
     font-size: 11px;
     color: var(--muted);
     line-height: 1.6;
}

/* ══ TYPE SELECTOR ══ */
.type-selector {
     margin-bottom: 40px;
     opacity: 0;
     animation: fadeUp 0.7s 0.55s ease forwards;
}

.type-label {
     font-size: 10px;
     font-weight: 500;
     letter-spacing: 0.3em;
     text-transform: uppercase;
     color: var(--muted);
     margin-bottom: 12px;
     display: block;
}

.type-options {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 2px;
     background: var(--border);
     border: 1px solid var(--border);
}

.type-option {
     background: var(--card);
     padding: 18px 14px;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 8px;
     cursor: pointer;
     transition: background 0.25s, border-color 0.25s;
     border: 2px solid transparent;
     position: relative;
}

.type-option:hover {
     background: var(--card2);
}

.type-option.selected {
     background: rgba(184, 150, 90, 0.07);
     border-color: var(--gold);
}

.type-option.selected::after {
     content: '✓';
     position: absolute;
     top: 8px;
     right: 10px;
     font-size: 10px;
     color: var(--gold);
}

.type-icon {
     font-size: 22px;
}

.type-name {
     font-size: 11px;
     font-weight: 500;
     letter-spacing: 0.08em;
     color: var(--text);
     text-align: center;
     line-height: 1.3;
}

.type-option.selected .type-name {
     color: var(--gold-lt);
}

/* ══ FORM ══ */
.form-wrap {
     opacity: 0;
     animation: fadeUp 0.7s 0.65s ease forwards;
     background-color: var(--card);
}

.form-section-title {
     font-size: 10px;
     font-weight: bold;
     letter-spacing: 0.3em;
     text-transform: uppercase;
     color: #ffffff;
     display: flex;
     align-items: center;
     gap: 12px;
     margin-bottom: 20px;
     padding-left: 12px;
     padding-right: 12px;
     padding-top: 12px;
     padding-bottom: 12px;
     border-bottom: 1px solid var(--border);
}

.form-section-title::after {
     content: '';
     flex: 1;
     height: 1px;
     background: var(--border);
}

.form-row {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 2px;
}

.form-group {
     margin-bottom: 2px;
     display: flex;
     flex-direction: column;
}

.form-group label {
     font-size: 10px;
     font-weight: bolder;
     letter-spacing: 0.2em;
     text-transform: uppercase;
     color: #ffffff;
     padding: 10px 16px 0;
     background: var(--card);
     border-bottom: none;
}

.form-group input,
.form-group select,
.form-group textarea {
     background: var(--card);
     border: none;
     border-top: none;
     color: #ffffff;
     font-family: 'DM Sans', sans-serif;
     font-size: 14px;
     font-weight: 300;
     padding: 10px 16px 14px;
     outline: none;
     transition: border-color 0.25s, background 0.25s;
     width: 100%;
     -webkit-appearance: none;
     appearance: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
     border-color: var(--gold-dim);
     background: var(--card2);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
     color: var(--soft);
}

.form-group select {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237a7265' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-position: right 14px center;
     padding-right: 36px;
     cursor: pointer;
}

.form-group select option {
     background: #1a1814;
     color: var(--text);
}

.form-group textarea {
     resize: vertical;
     min-height: 130px;
     line-height: 1.65;
}

.form-group.full {
     grid-column: 1 / -1;
}

.char-count {
     font-size: 10px;
     color: var(--muted);
     text-align: right;
     padding: 4px 0 0;
     letter-spacing: 0.05em;
}

/* Rating stars */
.rating-group {
     margin-bottom: 2px;
}

.rating-label {
     font-size: 10px;
     font-weight: 500;
     letter-spacing: 0.2em;
     text-transform: uppercase;
     color: var(--muted);
     padding: 10px 16px 8px;
     background: var(--card);
     border: 1px solid var(--border);
     border-bottom: none;
     display: block;
}

.stars-input {
     background: var(--card);
     border: 1px solid var(--border);
     border-top: none;
     padding: 12px 16px 14px;
     display: flex;
     gap: 6px;
     align-items: center;
}

.star-btn {
     font-size: 24px;
     background: none;
     border: none;
     cursor: pointer;
     color: var(--border2);
     transition: color 0.15s, transform 0.15s;
     line-height: 1;
     padding: 0 2px;
}

.star-btn:hover,
.star-btn.active {
     color: var(--color1);
}

.star-btn:hover {
     transform: scale(1.2);
}

.rating-text {
     font-size: 12px;
     color: var(--muted);
     margin-left: 8px;
}

/* File upload */
.file-upload {
     background: var(--card);
     border: 1px solid var(--border);
     padding: 20px;
     display: flex;
     align-items: center;
     gap: 16px;
     cursor: pointer;
     transition: background 0.25s, border-color 0.25s;
}

.file-upload:hover {
     background: var(--card2);
     border-color: var(--gold-dim);
}

.file-icon {
     width: 44px;
     height: 44px;
     background: rgba(184, 150, 90, 0.08);
     border: 1px solid var(--gold-dim);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 20px;
     flex-shrink: 0;
}

.file-info {
     flex: 1;
}

.file-info strong {
     display: block;
     font-size: 13px;
     font-weight: 400;
     color: var(--text);
     margin-bottom: 3px;
}

.file-info span {
     font-size: 11px;
     color: var(--muted);
}

#file-input {
     display: none;
}

.file-name {
     font-size: 11px;
     color: var(--green-lt);
     margin-top: 6px;
     display: none;
}

/* Anonymous toggle */
.anon-toggle {
     display: flex;
     align-items: center;
     justify-content: space-between;
     background: var(--card);
     border: 1px solid var(--border);
     padding: 18px 20px;
     cursor: pointer;
     transition: background 0.25s;
     user-select: none;
     gap: 16px;
}

.anon-toggle:hover {
     background: var(--card2);
}

.anon-info {}

.anon-info strong {
     display: block;
     font-size: 13px;
     font-weight: 400;
     color: var(--text);
     margin-bottom: 3px;
}

.anon-info span {
     font-size: 11px;
     color: var(--muted);
}

.toggle-switch {
     width: 44px;
     height: 24px;
     background: var(--border2);
     border-radius: 24px;
     position: relative;
     flex-shrink: 0;
     transition: background 0.3s;
}

.toggle-switch::after {
     content: '';
     position: absolute;
     top: 3px;
     left: 3px;
     width: 18px;
     height: 18px;
     border-radius: 50%;
     background: var(--muted);
     transition: transform 0.3s, background 0.3s;
}

.toggle-switch.on {
     background: var(--gold-dim);
}

.toggle-switch.on::after {
     transform: translateX(20px);
     background: var(--gold-lt);
}

/* Privacy note */
.privacy-note {
     display: flex;
     align-items: flex-start;
     gap: 10px;
     padding: 14px 18px;
     background: rgba(184, 150, 90, 0.04);
     border: 1px solid var(--gold-dim);
     margin-top: 2px;
}

.privacy-note svg {
     color: var(--gold-dim);
     flex-shrink: 0;
     margin-top: 2px;
}

.privacy-note p {
     font-size: 11px;
     color: var(--muted);
     line-height: 1.6;
}

/* Submit button */
.btn-submit-wrap {
     margin-top: 24px;
}

.btn-submit {
     width: 100%;
     background: var(--gold);
     color: var(--bg);
     border: none;
     padding: 20px;
     font-family: 'DM Sans', sans-serif;
     font-size: 11px;
     font-weight: 500;
     letter-spacing: 0.35em;
     text-transform: uppercase;
     cursor: pointer;
     transition: background 0.25s, transform 0.2s;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 12px;
     position: relative;
     overflow: hidden;
}

.btn-submit::before {
     content: '';
     position: absolute;
     inset: 0;
     background: rgba(255, 255, 255, 0.15);
     transform: translateX(-100%);
     transition: transform 0.4s ease;
}

.btn-submit:hover {
     background: var(--gold-lt);
}

.btn-submit:hover::before {
     transform: translateX(100%);
}

.btn-submit:active {
     transform: scale(0.99);
}

.btn-submit span {
     position: relative;
     z-index: 1;
}

.btn-submit svg {
     position: relative;
     z-index: 1;
}

/* ══ RIGHT COLUMN (STICKY SIDEBAR) ══ */
.right-col {
     position: sticky;
     top: 100px;
     display: flex;
     flex-direction: column;
     gap: 2px;
}

/* Process steps */
.sidebar-card {
     background: var(--card);
     border: 1px solid var(--border);
     overflow: hidden;
}

.sidebar-card-header {
     padding: 20px 24px;
     border-bottom: 1px solid var(--border);
     font-size: 10px;
     font-weight: bolder;
     letter-spacing: 0.3em;
     text-transform: uppercase;
     color: var(--color1);
     display: flex;
     align-items: center;
     gap: 10px;
}

.sidebar-card-header::after {
     content: '';
     flex: 1;
     height: 1px;
     background: var(--border);
}

.process-steps {
     padding: 8px 0;
}

.step {
     display: flex;
     align-items: flex-start;
     gap: 16px;
     padding: 16px 24px;
     border-bottom: 1px solid var(--border);
     transition: background 0.2s;
}

.step:last-child {
     border-bottom: none;
}

.step:hover {
     background: var(--card2);
}

.step-num {
     width: 28px;
     height: 28px;
     border: 1px solid var(--gold-dim);
     display: flex;
     align-items: center;
     justify-content: center;
     font-family: 'Cormorant Garamond', serif;
     font-size: 16px;
     color: var(--gold);
     flex-shrink: 0;
     margin-top: 1px;
}

.step-title {
     font-size: 13px;
     font-weight: 400;
     color: var(--text);
     margin-bottom: 3px;
}

.step-desc {
     font-size: 11px;
     color: var(--muted);
     line-height: 1.55;
}

/* Contact alternatives */
.alt-contact {
     padding: 8px 0;
}

.alt-item {
     display: flex;
     align-items: center;
     gap: 14px;
     padding: 14px 24px;
     border-bottom: 1px solid var(--border);
     text-decoration: none;
     color: inherit;
     transition: background 0.2s;
}

.alt-item:last-child {
     border-bottom: none;
}

.alt-item:hover {
     background: var(--card2);
}

.alt-icon {
     width: 36px;
     height: 36px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: var(--surface);
     border: 1px solid var(--border);
     font-size: 17px;
     flex-shrink: 0;
}

.alt-label {
     font-size: 10px;
     letter-spacing: 0.15em;
     text-transform: uppercase;
     color: var(--muted);
     display: block;
     margin-bottom: 2px;
}

.alt-value {
     font-size: 13px;
     color: var(--text);
     font-weight: 400;
}

.alt-item:hover .alt-value {
     color: var(--gold-lt);
}

/* Guarantee badge */
.guarantee-box {
     background: linear-gradient(135deg, rgba(184, 150, 90, 0.06) 0%, transparent 60%);
     border: 1px solid var(--color4);
     padding: 24px;
     display: flex;
     flex-direction: column;
     gap: 14px;
}

.guarantee-box h4 {
     font-family: 'Cormorant Garamond', serif;
     font-size: 22px;
     font-weight: 300;
     color: var(--color3);
}

.guarantee-box h4 em {
     font-style: italic;
     color: var(--color1);
}

.guarantee-list {
     display: flex;
     flex-direction: column;
     gap: 8px;
}

.guarantee-item {
     display: flex;
     align-items: center;
     gap: 10px;
     font-size: 12px;
     color: var(--color5);
}

.guarantee-item::before {
     content: '◆';
     font-size: 6px;
     color: var(--gold);
     flex-shrink: 0;
}

/* ══ SUCCESS SCREEN ══ */
.success-screen {
     display: none;
     position: fixed;
     inset: 0;
     background: var(--bg);
     z-index: 500;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     text-align: center;
     padding: 40px;
}

.success-screen.show {
     display: flex;
}

.success-icon-ring {
     width: 100px;
     height: 100px;
     border: 1px solid var(--gold-dim);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 44px;
     margin-bottom: 32px;
     animation: ringPulse 2s ease-in-out infinite;
}

@keyframes ringPulse {

     0%,
     100% {
          box-shadow: 0 0 0 0 rgba(184, 150, 90, 0.3);
     }

     50% {
          box-shadow: 0 0 0 16px rgba(184, 150, 90, 0);
     }
}

.success-num {
     font-family: 'Cormorant Garamond', serif;
     font-size: 12px;
     letter-spacing: 0.3em;
     color: var(--gold);
     margin-bottom: 6px;
     text-transform: uppercase;
}

.success-title {
     font-family: 'Cormorant Garamond', serif;
     font-size: clamp(36px, 5vw, 58px);
     font-weight: 300;
     color: var(--text);
     line-height: 1.05;
     margin-bottom: 16px;
}

.success-title em {
     font-style: italic;
     color: var(--gold-lt);
}

.success-desc {
     font-size: 15px;
     color: var(--muted);
     line-height: 1.7;
     max-width: 420px;
     margin: 0 auto 36px;
}

.success-ticket {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     background: var(--card);
     border: 1px solid var(--border);
     padding: 14px 24px;
     font-size: 13px;
     color: var(--muted);
     margin-bottom: 36px;
}

.success-ticket strong {
     color: var(--gold-lt);
     font-weight: 400;
     letter-spacing: 0.1em;
}

.btn-back-home {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     background: transparent;
     border: 1px solid var(--gold-dim);
     color: var(--gold-lt);
     font-family: 'DM Sans', sans-serif;
     font-size: 11px;
     font-weight: 500;
     letter-spacing: 0.25em;
     text-transform: uppercase;
     padding: 16px 32px;
     text-decoration: none;
     cursor: pointer;
     transition: border-color 0.2s, background 0.2s;
}

.btn-back-home:hover {
     border-color: var(--gold);
     background: rgba(184, 150, 90, 0.06);
}



/* ══════════════════════════════════════
       MOBILE NAV MENU
    ══════════════════════════════════════ */
.mobile-menu {
     display: none;
     position: fixed;
     inset: 0;
     background: rgba(8, 8, 7, 0.97);
     z-index: 300;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 32px;
}

.mobile-menu.open {
     display: flex;
}

.mobile-menu a {
     font-family: 'Cormorant Garamond', serif;
     font-size: 36px;
     font-weight: 300;
     color: var(--text);
     text-decoration: none;
     transition: color 0.2s;
}

.mobile-menu a:hover {
     color: var(--gold-lt);
}

.mobile-close {
     position: absolute;
     top: 24px;
     right: 24px;
     background: none;
     border: 1px solid var(--border);
     color: var(--text);
     font-size: 24px;
     width: 44px;
     height: 44px;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
}

/* ══════════════════════════════════════
       RESPONSIVE
    ══════════════════════════════════════ */
@media (max-width: 1100px) {
     .footer-top {
          grid-template-columns: 1fr 1fr;
          gap: 36px;
     }

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

     .stat-item:nth-child(2) {
          border-right: none;
     }
}

@media (max-width: 900px) {
     nav {
          padding: 18px 24px;
     }

     nav.scrolled {
          padding: 12px 24px;
     }

     .nav-links {
          display: none;
     }

     .nav-burger {
          display: flex;
     }

     .hero-content {
          padding: 0 24px 72px;
     }

     .hero-scroll-line {
          left: 24px;
     }

     .hero-dots {
          right: 24px;
     }

     .section-wrap {
          padding: 72px 24px;
     }

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

     .rooms-bottom-row {
          grid-template-columns: 1fr 1fr;
     }

     .exp-strip {
          grid-template-columns: 1fr;
     }

     .exp-item {
          border-right: none;
          border-bottom: 1px solid var(--border);
     }

     .exp-item:last-child {
          border-bottom: none;
     }

     .location-wrap {
          grid-template-columns: 1fr;
          padding: 72px 24px;
          gap: 40px;
     }

     .quejas-wrap {
          flex-direction: column;
          padding: 56px 24px;
     }

     .quejas-divider {
          display: none;
     }

     .btn-quejas-big {
          width: 100%;
          justify-content: center;
     }

     .footer-top {
          grid-template-columns: 1fr;
          padding: 52px 24px;
     }

     .footer-bottom {
          flex-direction: column;
          text-align: center;
          padding: 20px 24px;
     }
}

@media (max-width: 600px) {
     .rooms-grid {
          grid-template-columns: 1fr;
     }

     .rooms-bottom-row {
          grid-template-columns: 1fr;
     }

     .stats-bar {
          grid-template-columns: 1fr 1fr;
     }

     .hero-actions {
          flex-direction: column;
          align-items: flex-start;
     }
}


/*--------------------------------------------------------------------- top banner area ---------------------------------------------------------------------*/


/*-- navigation--*/

.navigation.navbar {
     float: right;
     padding-top: 14px !important;
     padding: 0;
}

.navigation.navbar-dark .navbar-nav .nav-link {
     padding: 7px 0px 27px 0px;
     margin: 0 22px;
     color: #010101;
     font-size: 16px;
     line-height: 20px;
     font-weight: 500;
     text-transform: uppercase;
     border-bottom: #fff solid 3px;
}

.navigation.navbar-dark .navbar-nav .nav-link:focus,
.navigation.navbar-dark .navbar-nav .nav-link:hover {
     color: #023373;
     border-bottom: #023373 solid 3px;
}

.navigation.navbar-dark .navbar-nav .active>.nav-link,
.navigation.navbar-dark .navbar-nav .nav-link.active,
.navigation.navbar-dark .navbar-nav .nav-link.show,
.navigation.navbar-dark .navbar-nav .show>.nav-link {
     color: #023373;
     border-bottom: #023373 solid 3px;
}

.navbar-expand-md .navbar-nav {
     padding-right: 10px;
}

.header {
     width: 100%;
     height: 86px;
     padding: 15px 0px 15px 0px;
     background: #fff;
}