@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Playfair+Display:wght@500;600;700&display=swap');
/* =====================================================
   1. VARIABLES
===================================================== */

:root {
    --bordo: #7a1f2d;
    --bordo-claro: #9b2d3d;
    --bordo-oscuro: #50121d;
    --dorado: #d4af37;
    --dorado-claro: #efd682;
    --crema: #f6f1e8;
    --crema-claro: #fbf8f2;
    --texto: #25201e;
    --gris: #6d6864;
    --blanco: #fff;
    --borde: #e5ddd2;
    --sombra: 0 18px 45px rgba(54,34,30,.12);
    --sombra-fuerte: 0 25px 65px rgba(43,20,25,.18);
}

/* =====================================================
   2. RESET Y ESTILOS GENERALES
===================================================== */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter',Arial,sans-serif;
    color: var(--texto);
    background: var(--crema-claro);
    line-height: 1.6;
}

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

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

button {
    font: inherit;
}

/* =====================================================
   3. HEADER
===================================================== */

.site-header {
    height: 75px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 70px;
    border-bottom: 1px solid #ececec;
    position: sticky;
    top: 0;
    z-index: 999;
}
 header{
    height:75px;
    background:white;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 70px;
    border-bottom:1px solid #ececec;
    position:sticky;
    top:0;
    z-index:999;
}

.logo{
  display:flex;
  align-items:center;
  text-decoration:none;
}

.logo img{
  height:90px;
  width:auto;
}

.logo img:hover{
  transform:scale(1.05);
}

nav{
    display:flex;
    gap:10px;
}

.dropdown{
    position:relative;
}

.menu-btn{
    background:none;
    border:none;
    color:#111;
    font-size:13px;
    font-weight:bold;
    text-transform:uppercase;
    cursor:pointer;
    padding:12px 14px;
}

.menu-btn:hover{
    color:#7a1f2d;
}

.dropdown-content{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    min-width:220px;
    background:white;
    border-radius:8px;
    overflow:hidden;
    box-shadow:0 10px 25px rgba(0,0,0,.15);
}

.dropdown-content a{
    display:block;
    padding:14px 18px;
    text-decoration:none;
    color:#222;
}

.dropdown-content a:hover{
    background:#f5ede4;
    color:#7a1f2d;
}

.dropdown:hover .dropdown-content{
    display:block;
}

.btn-outline{
    background:white;
    border:1px solid #7a1f2d;
    color:#7a1f2d;
    padding:12px 20px;
    border-radius:5px;
}

/* =====================================================
   4. HERO
===================================================== */

.hero-cordoba {
    min-height: 640px;
    padding: 90px 8%;
    position: relative;
    display: flex;
    align-items: center;
    background: url('Imagenes/Portada.jpg') center/cover no-repeat;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,rgba(24,8,12,.90),rgba(35,12,18,.69) 50%,rgba(35,12,18,.18));
}

.hero-content {
    width: 100%;
    max-width: 780px;
    position: relative;
    z-index: 2;
    color: #fff;
}

.hero-kicker,
.section-heading>span {
    color: var(--dorado);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.hero-content h1 {
    margin: 15px 0 20px;
    font-family: 'Playfair Display',Georgia,serif;
    font-size: clamp(52px,7vw,82px);
    font-weight: 600;
    line-height: 1.02;
}

.hero-content>p {
    max-width: 690px;
    margin-bottom: 30px;
    color: rgba(255,255,255,.9);
    font-size: 19px;
    line-height: 1.7;
}

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

.btn-primary,
.btn-secondary {
    min-height: 50px;
    padding: 13px 23px;
}

.btn-primary {
    color: #fff;
    background: var(--bordo);
}

.btn-primary:hover {
    background: var(--bordo-claro);
    transform: translateY(-3px);
}

.btn-secondary {
    color: #fff;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.5);
    backdrop-filter: blur(7px);
}

.btn-secondary:hover {
    color: var(--bordo-oscuro);
    background: #fff;
    transform: translateY(-3px);
}

.hero-stats {
    max-width: 620px;
    margin-top: 38px;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 13px;
}

.hero-stats>div {
    min-height: 94px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: rgba(255,255,255,.11);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 15px;
    backdrop-filter: blur(8px);
}

.hero-stats strong {
    color: var(--dorado-claro);
    font-family: 'Playfair Display',Georgia,serif;
    font-size: 31px;
    line-height: 1;
}

.hero-stats span {
    margin-top: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* =====================================================
   5. TÍTULOS Y PRESENTACIÓN
===================================================== */

.intro-section,
/* =====================================================
   6. HOTELES PREMIUM
===================================================== */

.premium-section {
    max-width: 1300px;
    margin: 0 auto;
    padding-left: 6%;
    padding-right: 6%;
}

.intro-section {
    padding-top: 85px;
    padding-bottom: 65px;
}

.section-heading {
    max-width: 790px;
    margin: 0 auto 45px;
    text-align: center;
}

.section-heading-left {
    max-width: 850px;
    margin-left: 0;
    text-align: left;
}

.section-heading h2 {
    margin: 9px 0 14px;
    color: var(--bordo-oscuro);
    font-family: 'Playfair Display',Georgia,serif;
    font-size: clamp(36px,4vw,50px);
    font-weight: 600;
    line-height: 1.15;
}

.section-heading p {
    color: var(--gris);
    font-size: 17px;
    line-height: 1.75;
}

.premium-section {
    padding-top: 35px;
    padding-bottom: 100px;
    scroll-margin-top: 100px;
}

.premium-list {
    display: flex;
    flex-direction: column;
    gap: 42px;
}

.premium-card {
    min-height: 530px;
    display: grid;
    grid-template-columns: minmax(0,1.18fr) minmax(380px,.82fr);
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: 24px;
    box-shadow: var(--sombra);
    transition: .35s;
}

.premium-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--sombra-fuerte);
}

.premium-card-reverse {
    grid-template-columns: minmax(380px,.82fr) minmax(0,1.18fr);
}

.premium-card-reverse /* =====================================================
   7. CARRUSELES PREMIUM
===================================================== */

.hotel-carousel {
    order: 2;
}

.premium-card-reverse /* =====================================================
   8. INFORMACIÓN PREMIUM
===================================================== */

.premium-content {
    order: 1;
}

.hotel-carousel {
    min-height: 530px;
    position: relative;
    overflow: hidden;
    background: #21171a;
}

.carousel-track {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
}

.carousel-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: .65s;
}

.carousel-slide.active {
    opacity: 1;
    visibility: visible;
}

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

.hotel-carousel::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.24));
}

.carousel-arrow {
    width: 43px;
    height: 43px;
    position: absolute;
    top: 50%;
    z-index: 5;
    display: grid;
    place-items: center;
    transform: translateY(-50%);
    color: #fff;
    background: rgba(32,14,19,.55);
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 50%;
    cursor: pointer;
    backdrop-filter: blur(7px);
}

.carousel-arrow:hover {
    background: var(--bordo);
    transform: translateY(-50%) scale(1.08);
}

.carousel-prev {
    left: 17px;
}

.carousel-next {
    right: 17px;
}

.carousel-dots {
    position: absolute;
    left: 50%;
    bottom: 21px;
    z-index: 6;
    display: flex;
    gap: 8px;
    transform: translateX(-50%);
}

.carousel-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    background: rgba(255,255,255,.5);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: .25s;
}

.carousel-dot.active {
    width: 28px;
    background: var(--dorado);
    border-radius: 999px;
}

.premium-badge {
    position: absolute;
    top: 19px;
    left: 19px;
    z-index: 7;
    padding: 8px 13px;
    color: #2b1c08;
    background: linear-gradient(135deg,#f3d77c,#d4af37);
    border: 1px solid rgba(255,255,255,.6);
    border-radius: 999px;
    box-shadow: 0 8px 22px rgba(0,0,0,.18);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.premium-content {
    padding: 48px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.premium-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 25px;
}

.location {
    color: var(--bordo);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.premium-heading h3 {
    margin-top: 5px;
    color: var(--bordo-oscuro);
    font-family: 'Playfair Display',Georgia,serif;
    font-size: 38px;
    font-weight: 600;
    line-height: 1.12;
}

.rating-box {
    min-width: 75px;
    padding: 10px 11px;
    text-align: center;
    background: var(--crema);
    border: 1px solid #eadcbf;
    border-radius: 13px;
}

.rating-box strong {
    display: block;
    color: var(--bordo-oscuro);
    font-size: 20px;
    line-height: 1;
}

.rating-box span {
    display: block;
    margin-top: 5px;
    color: var(--dorado);
    font-size: 9px;
    letter-spacing: 1px;
}

.hotel-type {
    margin: 12px 0 18px;
    color: var(--dorado);
    font-size: 13px;
    font-weight: 700;
}

.premium-description {
    margin-bottom: 25px;
    color: var(--gris);
    font-size: 15px;
    line-height: 1.75;
}

.premium-details {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 13px;
}

.detail-item {
    min-height: 68px;
    padding: 12px 13px;
    display: flex;
    align-items: center;
    gap: 11px;
    background: var(--crema-claro);
    border: 1px solid var(--borde);
    border-radius: 12px;
}

.detail-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    color: var(--bordo);
    background: #fff;
    border: 1px solid #eadfd5;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 800;
}

.detail-item small {
    display: block;
    color: #8a827d;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
}

.detail-item a,
.detail-item div>span {
    display: block;
    overflow: hidden;
    color: var(--texto);
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.premium-actions {
    margin-top: 26px;
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
}

.btn-premium,
.btn-outline {
    min-height: 46px;
    padding: 12px 20px;
    font-size: 13px;
}

.btn-premium {
    color: #fff;
    background: var(--bordo);
}

.btn-premium:hover {
    background: var(--bordo-oscuro);
    transform: translateY(-2px);
}

.btn-outline {
    color: var(--bordo);
    background: #fff;
    border: 1px solid var(--bordo);
}

.btn-outline:hover {
    color: #fff;
    background: var(--bordo);
    transform: translateY(-2px);
}

/* =====================================================
   9. HOTELES BÁSICOS
===================================================== */

.basic-section {
    max-width: none;
    padding: 90px 0 105px;
    background: var(--crema);
    scroll-margin-top: 90px;
}

.basic-section>.section-heading,
.basic-grid {
    width: min(1160px,88%);
    margin-left: auto;
    margin-right: auto;
}

.basic-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 23px;
}

.basic-card {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: 18px;
    box-shadow: 0 10px 26px rgba(55,34,30,.08);
    transition: .3s;
}

.basic-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 18px 40px rgba(55,34,30,.14);
}

.basic-image {
    height: 220px;
    position: relative;
    overflow: hidden;
    background: #ded7cf;
}

.basic-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .45s;
}

.basic-card:hover .basic-image img {
    transform: scale(1.05);
}

.basic-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 6px 10px;
    color: #fff;
    background: #8f8a86;
    border: 1px solid rgba(255,255,255,.38);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.basic-content {
    min-height: 165px;
    padding: 21px;
    display: flex;
    flex-direction: column;
}

.basic-content h3 {
    margin: 6px 0 17px;
    color: var(--bordo-oscuro);
    font-family: 'Playfair Display',Georgia,serif;
    font-size: 23px;
    font-weight: 600;
    line-height: 1.2;
}

.basic-phone {
    width: 100%;
    min-height: 43px;
    margin-top: auto;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bordo);
    background: var(--crema-claro);
    border: 1px solid #eadfd5;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;
}

.basic-phone:hover {
    color: #fff;
    background: var(--bordo);
    border-color: var(--bordo);
}

/* =====================================================
   10. LLAMADO A LA ACCIÓN
===================================================== */

.cta-section {
    width: min(1230px,88%);
    margin: 82px auto;
    padding: 48px 55px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    color: #fff;
    background: linear-gradient(135deg,var(--bordo-oscuro),var(--bordo));
    border-radius: 22px;
}

.cta-section span {
    color: var(--dorado);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.cta-section h2 {
    max-width: 780px;
    margin: 8px 0;
    font-family: 'Playfair Display',Georgia,serif;
    font-size: 36px;
    font-weight: 600;
    line-height: 1.17;
}

.cta-section p {
    max-width: 740px;
    color: rgba(255,255,255,.82);
}

.btn-light {
    flex-shrink: 0;
    min-height: 49px;
    padding: 13px 23px;
    color: var(--bordo);
    background: #fff;
}

.btn-light:hover {
    color: #fff;
    background: var(--dorado);
    transform: translateY(-3px);
}
.footer-bodegar{background:linear-gradient(180deg,#650b20 0%,#3d0714 100%);color:#fff;margin-top:60px}
.footer-bodegar-container{max-width:1300px;margin:auto;padding:45px 40px;display:grid;grid-template-columns:1.2fr .8fr .9fr .9fr;gap:70px;align-items:start}
.footer-brand{max-width:300px}
.footer-bodegar-logo{width:155px;margin-bottom:22px}
.footer-brand h2{font-family:"Playfair Display",serif;font-size:25px;font-weight:500;line-height:1.08;margin-bottom:14px}
.footer-brand h2 span{display:block;color:var(--dorado);font-size:28px}
.footer-brand p{font-size:13px;line-height:1.75;color:rgba(255,255,255,.75);max-width:270px}
.footer-col h3,.footer-auspicia h3{font-family:"Playfair Display",serif;font-size:25px;font-weight:600;margin-bottom:18px}
.footer-col a,.footer-proximamente{display:block;margin-bottom:11px;color:rgba(255,255,255,.9);font-size:14px}
.footer-auspiciante-logo{width:145px;margin-top:18px}
.footer-bodegar-bottom{border-top:1px solid rgba(255,255,255,.18);max-width:1300px;margin:auto;padding:18px 40px;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:rgba(255,255,255,.7)}