:root{
  --negro:#000;
  --carbon:#150b0c;
  --rojo:#c4161c;
  --rojo-vivo:#e0262c;
  --vino:#7d1f26;
  --blanco:#fff;
  --humo:#d8cfcf;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--negro);color:var(--blanco);font-family:var(--sans);font-size:18px;line-height:1.6}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--rojo-vivo);outline-offset:3px}

/* Cabecera */
.cab{position:sticky;top:0;z-index:10;background:linear-gradient(#00000033,#00000033),url(img/fondo-cabecera.jpg) center/cover no-repeat,var(--rojo);border-bottom:1px solid #ffffff33}
.cab-in{max-width:1120px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.marca{display:flex;align-items:center;gap:12px;text-decoration:none}
.marca img{width:54px;height:54px;border-radius:50%;border:2px solid #fff6}
.marca span{font-family:var(--serif);font-size:1.45rem;font-weight:600;letter-spacing:.01em}
nav ul{list-style:none;margin:0;padding:0;display:flex;gap:6px;flex-wrap:wrap}
nav a{display:block;padding:8px 14px;text-decoration:none;font-weight:600;font-size:1rem;border-bottom:3px solid transparent}
nav a:hover,nav a[aria-current]{border-bottom-color:var(--blanco)}

/* Portada */
.portada{position:relative;min-height:76vh;display:flex;align-items:flex-end;background:url(img/portada.jpg) center/cover no-repeat}
.portada::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0000 0%,#0000 45%,#000000a6 82%,#000 100%)}
.portada-in{position:relative;max-width:1120px;width:100%;margin:0 auto;padding:0 20px 64px}
.portada h1{text-shadow:0 2px 18px #000000b3;font-family:var(--serif);font-weight:700;font-size:clamp(2.6rem,7vw,5.2rem);line-height:1.02;margin:0 0 14px;max-width:14ch}
.portada p{text-shadow:0 1px 12px #000000cc;color:var(--blanco);font-size:1.2rem;max-width:34em;margin:0 0 28px;color:var(--humo)}
.botones{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:13px 26px;font-weight:600;text-decoration:none;border:2px solid var(--rojo-vivo);border-radius:2px;transition:background .15s,color .15s}
.btn-ppal{background:var(--rojo-vivo)}
.btn-ppal:hover{background:var(--blanco);border-color:var(--blanco);color:var(--rojo)}
.btn-sec{background:transparent}
.btn-sec:hover{background:var(--blanco);border-color:var(--blanco);color:var(--negro)}

/* Franja */
.franja{background:var(--vino);text-align:center;padding:26px 20px}
.franja p{max-width:44em;margin:0 auto;font-family:var(--serif);font-size:1.5rem;line-height:1.35}

/* Secciones */
.sec{max-width:1120px;margin:0 auto;padding:80px 20px}
.sec h2{font-family:var(--serif);font-weight:700;font-size:clamp(2rem,4.5vw,3rem);line-height:1.1;margin:0 0 24px}
.servicios{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center}
.lista{list-style:none;margin:0 0 24px;padding:0}
.lista li{position:relative;padding:11px 0 11px 28px;border-bottom:1px solid #ffffff22}
.lista li::before{content:"";position:absolute;left:2px;top:1.05em;width:10px;height:10px;background:var(--rojo-vivo);transform:rotate(45deg)}
.cierre{font-family:var(--serif);font-size:1.5rem;line-height:1.3;color:var(--humo);margin:0}
.mosaico{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mosaico img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.mosaico img:first-child{grid-column:1/-1;aspect-ratio:16/10}

.habitaciones{background:var(--carbon);border-top:1px solid #ffffff1f;border-bottom:1px solid #ffffff1f}
.hab-in{max-width:1120px;margin:0 auto;padding:72px 20px;display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center}
.pares{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pares img{aspect-ratio:4/5;width:100%;object-fit:cover}
.hab-in p{color:var(--humo);max-width:30em;margin:0 0 26px}

/* Pie */
.pie{text-align:center;padding:64px 20px 40px;border-top:1px solid var(--rojo)}
.pie h2{font-family:var(--serif);font-weight:700;font-size:2.2rem;margin:0 0 14px}
.pie address{font-style:normal;margin-bottom:22px;color:var(--humo)}
.pie address a{color:var(--blanco);text-decoration-color:var(--rojo-vivo);text-underline-offset:4px}
.pie small{display:block;margin-top:36px;color:#ffffff88;font-size:.85rem}

@media (max-width:820px){
  .servicios,.hab-in{grid-template-columns:1fr;gap:36px}
  .sec{padding:56px 20px}
  .cab-in{justify-content:center}
  .portada{min-height:70vh}
  .franja p{font-size:1.25rem}
}

/* Páginas interiores */
.titulo-pag{max-width:1120px;margin:0 auto;padding:64px 20px 8px}
.titulo-pag h1{font-family:var(--serif);font-weight:700;font-size:clamp(2.4rem,6vw,4rem);line-height:1.05;margin:0 0 10px}
.titulo-pag p{margin:0;color:var(--humo)}
.tarifas{max-width:1120px;margin:0 auto;padding:36px 20px 72px;display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center}
.precios{width:100%;border-collapse:collapse}
.precios td{padding:16px 0;border-bottom:1px solid #ffffff22}
.precios tr:first-child td{border-top:1px solid #ffffff22}
.precios td:first-child{font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:1rem}
.precios td:last-child{text-align:right;font-family:var(--serif);font-weight:700;font-size:1.8rem;color:var(--rojo-vivo)}
.tarifas img{width:100%;height:auto}
.horarios{background:var(--carbon);border-top:1px solid #ffffff1f;border-bottom:1px solid #ffffff1f}
.hor-in{max-width:1120px;margin:0 auto;padding:64px 20px;display:grid;grid-template-columns:1fr 1fr;gap:56px}
.hor-in h2{font-family:var(--serif);font-weight:700;font-size:2.2rem;margin:0 0 18px}
.horas{margin:0}
.horas div{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid #ffffff22}
.horas dt{color:var(--humo)}
.horas dd{margin:0;font-weight:600;text-align:right}
.notas{margin:22px 0 0;padding-left:18px;color:var(--humo)}
.notas li{margin-bottom:6px}
.notas strong{color:var(--blanco)}
@media (max-width:820px){
  .tarifas,.hor-in{grid-template-columns:1fr;gap:36px}
  .titulo-pag{padding-top:44px}
}


/* Menú desplegable de Habitaciones */
nav li{position:relative}
.desp{display:flex;align-items:center}
.desp>a{padding-right:6px}
.desp>button{font:inherit;color:inherit;background:none;border:0;padding:8px 12px 8px 2px;cursor:pointer}
.desp>button::after{content:"";display:inline-block;border:5px solid transparent;border-top-color:currentColor;border-bottom-width:0;vertical-align:middle}
.desp ul{display:none;position:absolute;left:0;top:100%;min-width:220px;background:var(--carbon);border:1px solid #ffffff33;padding:6px 0;flex-direction:column;gap:0;z-index:20}
.desp.abierto ul{display:flex}
@media (hover:hover){.desp:hover ul{display:flex}}
.desp ul a{border-bottom:0;padding:10px 18px;font-weight:400}
.desp ul a:hover,.desp ul a[aria-current]{background:#ffffff1a}

/* Submenú de categorías */
.sub{background:var(--rojo);border-bottom:1px solid #00000040}
.sub ul{max-width:1120px;margin:0 auto;padding:0 20px;list-style:none;display:flex;flex-wrap:nowrap;gap:0;overflow-x:auto;white-space:nowrap}
.sub a{display:block;padding:12px 16px;text-decoration:none;font-size:.95rem;font-weight:600;border-bottom:0}
.sub a:hover{background:#00000033}
.sub a[aria-current]{background:#3a3a3a}

/* Página de categoría */
.galeria{max-width:1120px;margin:0 auto;padding:28px 20px 16px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.galeria img{width:100%;aspect-ratio:4/3;object-fit:cover}
.centro{text-align:center;padding:28px 20px 80px}
@media (max-width:820px){
  .galeria{grid-template-columns:1fr 1fr}
  .desp{flex-wrap:wrap;justify-content:center}
  .desp ul{position:static;border:0;background:none;align-items:center;width:100%}
}


/* Legibilidad del menú sobre la seda */
.cab nav>ul>li>a,.desp>button,.marca span{text-shadow:0 1px 8px #000000b3}

/* Tarifas: categorías con enlace */
.precios td:first-child a{text-decoration:none;border-bottom:1px solid var(--rojo-vivo)}
.precios td:first-child a::after{content:" \2192";color:var(--rojo-vivo)}
.precios td:first-child a:hover{color:var(--rojo-vivo)}

/* Contacto */
.contacto{max-width:1120px;margin:0 auto;padding:36px 20px 80px;display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center}
.contacto .mapa{display:block}
.contacto .mapa img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
.contacto p{font-size:1.25rem;margin:0 0 16px;color:var(--humo)}
.contacto .tel{display:block;font-family:var(--serif);font-weight:700;font-size:2.2rem;color:var(--blanco);line-height:1.2}
@media (max-width:820px){.contacto{grid-template-columns:1fr;gap:32px}}


/* Fotos ampliables */
.foto{padding:0;border:0;background:none;cursor:zoom-in;display:block;line-height:0}
.visor{border:0;padding:0;background:transparent;max-width:none;max-height:none;overflow:visible}
.visor::backdrop{background:rgba(0,0,0,.9)}
.visor img{display:block;max-width:92vw;max-height:84vh;width:auto;height:auto}
.cerrar{position:fixed;top:16px;right:16px;width:48px;height:48px;border-radius:50%;border:2px solid #ffffff99;background:#000000a6;color:var(--blanco);font-size:2rem;line-height:1;cursor:pointer}
.cerrar:hover{background:var(--rojo-vivo);border-color:var(--rojo-vivo)}

.cab nav>ul{align-items:center}