/* ============================================================================
   Pochccota — Sistema de diseño del frontend público (Modernized)
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Colors */
  --pk-paper:   #1A1B1A;
  --pk-panel:   #2C2D2C;
  --pk-ink:     #FFFFFF;
  --pk-indigo:  #B99D75;
  --pk-indigo-700: #C7B191;
  --pk-copper:  #B99D75;
  --pk-copper-700: #C7B191;
  --pk-slate:   #949494;
  --pk-line:    #232323;
  --pk-cream:   #2C2D2C;
  --pk-white:   #2C2D2C;

  /* Typography */
  --pk-display: "Marcellus", serif;
  --pk-sans: "Jost", sans-serif;

  /* Typography scale */
  --step--1: 14px;
  --step-0:  16px;
  --step-1:  18px;
  --step-2:  clamp(24px, 4vw, 30px);
  --step-3:  clamp(32px, 5vw, 48px);
  --step-4:  clamp(40px, 6vw, 60px);
  --step-5:  clamp(48px, 9vw, 100px);

  /* Spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 48px;

  --pk-radius: 8px;
  --pk-radius-lg: 8px;
  --pk-radius-btn: 99px;
  --pk-maxw: 1240px;
  
  --pk-shadow: none;
  --pk-shadow-lg: none;
  
  --pk-border: 1px solid var(--pk-line);
  --pk-ease: ease-in-out;
  --pk-duration: 0.3s;
}

/* ---------- Reset acotado ---------- */
.pk *, .pk *::before, .pk *::after { box-sizing: border-box; }
.pk { margin: 0; }
body.pk {
  font-family: var(--pk-sans);
  font-size: var(--step-0);
  line-height: 1.66;
  color: var(--pk-ink);
  background: var(--pk-paper);
  color-scheme: dark;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.pk img { max-width: 100%; height: auto; display: block; border-radius: var(--pk-radius); }
.pk a { color: var(--pk-ink); text-decoration: none; transition: color var(--pk-duration) var(--pk-ease); }
.pk a:hover { color: var(--pk-copper); }

.pk h1 { margin: 0; font-family: var(--pk-display); font-weight: 400; font-size: var(--step-5); line-height: 1; color: var(--pk-ink); }
.pk h2 { margin: 0; font-family: var(--pk-display); font-weight: 400; font-size: var(--step-4); line-height: 1.2; color: var(--pk-ink); }
.pk h3 { margin: 0; font-family: var(--pk-display); font-weight: 400; font-size: var(--step-3); line-height: 1.35; color: var(--pk-ink); }
.pk h4 { margin: 0; font-family: var(--pk-display); font-weight: 400; font-size: var(--step-2); line-height: 1.4; color: var(--pk-ink); }

.pk p { margin: 0 0 var(--sp-4); }
.pk ul { margin: 0; padding: 0; list-style: none; }

/* ---------- Layout ---------- */
.pk-wrap { width: 100%; max-width: var(--pk-maxw); margin-inline: auto; padding-inline: var(--sp-4); }
@media (min-width: 768px) { .pk-wrap { padding-inline: var(--sp-7); } }
.pk-section { padding-block: var(--sp-8); }
.pk-grid { display: grid; gap: var(--sp-6); }
.pk-panel { background: var(--pk-panel); }

/* ---------- Eyebrow + banda signature ---------- */
.pk-eyebrow {
  font-family: var(--pk-sans);
  font-size: var(--step-0);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--pk-copper);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-3);
}
.pk-band {
  display: none; /* Removed for flat minimal look */
}

/* ---------- Títulos ---------- */
.pk-h-sec { margin-bottom: var(--sp-4); }
.pk-lead { font-size: var(--step-1); color: var(--pk-slate); max-width: 60ch; line-height: 1.66; margin: 0 auto; }
.pk-sec-head { margin-bottom: var(--sp-8); text-align: center; display: flex; flex-direction: column; align-items: center; }

/* ---------- Botones ---------- */
.pk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-family: var(--pk-sans); font-weight: 400; font-size: var(--step-0);
  text-transform: none;
  padding: var(--sp-3) var(--sp-6); border-radius: var(--pk-radius-btn);
  border: none; cursor: pointer; line-height: 1.66;
  transition: all var(--pk-duration) var(--pk-ease);
}
.pk-btn--primary { background: var(--pk-copper); color: #fff; }
.pk-btn--primary:hover { background: var(--pk-copper-700); }
.pk-btn--primary:active { opacity: 0.85; }
.pk-btn--dark { background: var(--pk-panel); color: #fff; border: var(--pk-border); }
.pk-btn--dark:hover { background: var(--pk-copper); border-color: var(--pk-copper); }
.pk-btn--dark:active { opacity: 0.85; }
.pk-btn--ghost { background: transparent; color: var(--pk-ink); border: 1px solid var(--pk-ink); }
.pk-btn--ghost:hover { background: var(--pk-ink); color: var(--pk-paper); }
.pk-btn--sm { padding: var(--sp-2) var(--sp-5); }
.pk-btn:focus-visible, .pk a:focus-visible, .pk button:focus-visible,
.pk input:focus-visible, .pk select:focus-visible, .pk textarea:focus-visible {
  outline: 2px solid var(--pk-copper); outline-offset: 2px;
}

/* ---------- Cards ---------- */
.pk-card { background: var(--pk-white); border: var(--pk-border); border-radius: var(--pk-radius-lg); overflow: hidden; transition: all var(--pk-duration) var(--pk-ease); display: flex; flex-direction: column; }
.pk-card:hover { transform: translateY(-4px); }
.pk-card__media { position: relative; aspect-ratio: 3/2; overflow: hidden; background: var(--pk-paper); border-radius: 0; }
.pk-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--pk-ease); border-radius: 0; }
.pk-card:hover .pk-card__media img { transform: scale(1.03); }
.pk-card__tag { position: absolute; top: var(--sp-3); left: var(--sp-3); background: var(--pk-panel); color: var(--pk-ink); font-size: var(--step--1); padding: var(--sp-1) var(--sp-3); border-radius: var(--pk-radius-btn); border: var(--pk-border); }
.pk-card__body { padding: var(--sp-5); display: flex; flex-direction: column; flex: 1; }
.pk-card__title { margin-bottom: var(--sp-2); }
.pk-card__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); color: var(--pk-slate); font-size: var(--step--1); margin-bottom: var(--sp-4); }
.pk-card__meta span { display: inline-flex; align-items: center; gap: var(--sp-1); }
.pk-card__foot { margin-top: auto; }

/* ---------- Formularios ---------- */
.pk-field { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.pk-field label { font-size: 12px; color: var(--pk-slate); text-transform: uppercase; letter-spacing: 1.5px; font-weight: 500; }
.pk-input, .pk-select, .pk-textarea {
  font-family: var(--pk-sans); font-size: var(--step-0); color: var(--pk-ink);
  background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--pk-radius);
  padding: 5px 35px 5px 15px; width: 100%; min-height: 52px; transition: all var(--pk-duration) var(--pk-ease);
}
.pk-input::placeholder, .pk-textarea::placeholder { color: var(--pk-slate); }
.pk-input:focus, .pk-select:focus, .pk-textarea:focus { border-color: var(--pk-copper); background: rgba(255, 255, 255, 0.06); outline: none; box-shadow: 0 0 0 1px var(--pk-copper); }
.pk-textarea { min-height: 8rem; resize: vertical; padding: 15px; }
.pk-select { padding: 0 15px; appearance: none; background-image: url("data:image/svg+xml;utf8,<svg fill='%23949494' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; }
.pk-select option { background: var(--pk-panel); color: var(--pk-ink); }

/* ---------- Header / navbar ---------- */
.pk-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; background: rgba(10, 10, 10, 0.7); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.pk-nav { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-5); min-height: 80px; }
.pk-brand { display: inline-flex; align-items: center; gap: var(--sp-3); font-family: var(--pk-display); font-size: var(--step-2); color: var(--pk-ink); }
.pk-brand img { height: 40px; width: auto; border-radius: 0; }
.pk-brand small { display: block; font-family: var(--pk-sans); font-size: var(--step--1); color: var(--pk-copper); line-height: 1; margin-top: 2px; }
.pk-menu { display: none; align-items: center; justify-content: center; gap: var(--sp-6); }
.pk-menu a { font-size: var(--step-0); color: var(--pk-slate); position: relative; padding: var(--sp-2) 0; white-space: nowrap; }
.pk-menu a:hover, .pk-menu a.is-active { color: var(--pk-ink); }
.pk-nav__cta { display: none; align-items: center; gap: var(--sp-3); justify-content: flex-end; }
.pk-nav__cta a[data-pk-login] { font-size: var(--step-0); color: var(--pk-ink); padding: var(--sp-2); }
.pk-burger { grid-column: 3; justify-self: end; display: inline-flex; flex-direction: column; gap: 6px; background: none; border: 0; padding: var(--sp-2); cursor: pointer; }
.pk-burger span { width: 30px; height: 2px; background: var(--pk-ink); transition: all var(--pk-duration) var(--pk-ease); }
.pk-nav[data-open="true"] .pk-burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.pk-nav[data-open="true"] .pk-burger span:nth-child(2) { opacity: 0; }
.pk-nav[data-open="true"] .pk-burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.pk-mobile { display: none; flex-direction: column; gap: 0; padding: var(--sp-3) 0 var(--sp-6); border-top: var(--pk-border); }
.pk-mobile a { font-size: var(--step-1); font-family: var(--pk-sans); color: var(--pk-ink); padding: var(--sp-3) 0; border-bottom: var(--pk-border); }
.pk-mobile a:last-of-type { border-bottom: 0; }
.pk-mobile .pk-btn { margin-top: var(--sp-4); }
.pk-nav[data-open="true"] + .pk-mobile { display: flex; }

@media (min-width: 1080px) {
  .pk-menu, .pk-nav__cta { display: flex; }
  .pk-burger { display: none; }
  .pk-nav[data-open="true"] + .pk-mobile { display: none; }
}

/* ---------- Hero (home) ---------- */
.pk-hero { position: relative; min-height: 100vh; display: grid; grid-template-rows: 1fr auto; padding-top: 120px; }

/* Capa de texto (H1) */
.pk-hero > .pk-wrap:nth-child(1) { position: relative; z-index: 20; align-self: center; padding-bottom: var(--sp-8); pointer-events: none; }
.pk-hero__head { max-width: 80rem; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; pointer-events: auto; }
.pk-hero__title { font-size: var(--step-5); text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.pk-hero__title em { font-style: normal; color: var(--pk-copper); }
.pk-hero__lead { font-size: var(--step-1); color: rgba(255,255,255,0.9); max-width: 60ch; margin-top: var(--sp-4); text-shadow: 0 1px 5px rgba(0,0,0,0.5); margin-inline: auto; }

/* Capa de fondo (Video full-bleed) */
.pk-hero__stage { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: hidden; background: var(--pk-paper); }
.pk-video-wrapper { position: absolute; inset: 0; width: 100%; height: 100%; }
.pk-video-bg { width: 100%; height: 100%; object-fit: cover; border-radius: 0; pointer-events: none; }
.pk-video-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(10,10,10,0.6) 0%, rgba(10,10,10,0.2) 40%, rgba(10,10,10,0.8) 100%); pointer-events: none; }

/* Capa inferior (Buscador flotante) */
.pk-hero > .pk-wrap:last-child { position: relative; z-index: 30; align-self: end; margin-bottom: -50px; pointer-events: none; }
.pk-booking { background: rgba(26, 27, 26, 0.85); backdrop-filter: blur(24px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; padding: var(--sp-5); margin-inline: auto; max-width: 1240px; box-shadow: 0 24px 60px rgba(0,0,0,0.5); pointer-events: auto; }
@media (min-width: 768px) { .pk-booking { padding: var(--sp-6) var(--sp-7); } }
.pk-booking__title { font-family: var(--pk-sans); font-size: var(--step-0); color: var(--pk-copper); margin-bottom: var(--sp-5); text-transform: uppercase; letter-spacing: 3px; text-align: center; }
.pk-booking__row { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .pk-booking__row { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .pk-booking__row { grid-template-columns: 1fr 1fr 0.7fr 0.7fr auto; align-items: end; gap: var(--sp-5); } }
.pk-booking__row .pk-field { margin-bottom: 0; }
.pk-booking__submit { width: 100%; border-radius: var(--pk-radius-btn); min-height: 52px; padding-inline: var(--sp-6); font-size: 14px; letter-spacing: 1px; }
@media (min-width: 960px) { .pk-booking__submit { width: auto; white-space: nowrap; } }

/* ---------- Intro / bienvenida ---------- */
.pk-intro__grid { display: grid; gap: var(--sp-6); align-items: center; }
@media (min-width: 900px) { .pk-intro__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-8); } }
.pk-quote { font-family: var(--pk-display); font-size: var(--step-3); line-height: 1.2; color: var(--pk-ink); }
.pk-quote cite { display: block; font-family: var(--pk-sans); font-size: var(--step-0); color: var(--pk-copper); margin-top: var(--sp-4); font-style: normal; }

/* ---------- Grillas de tarjetas ---------- */
.pk-cards { grid-template-columns: 1fr; }
@media (min-width: 600px) { .pk-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .pk-cards { grid-template-columns: repeat(3, 1fr); } }
.pk-cards--2 { grid-template-columns: 1fr; }
@media (min-width: 700px) { .pk-cards--2 { grid-template-columns: repeat(2, 1fr); } }

.pk-note { background: var(--pk-panel); border: var(--pk-border); border-radius: var(--pk-radius-lg); padding: var(--sp-5) var(--sp-6); transition: all var(--pk-duration) var(--pk-ease); }
.pk-note:hover { transform: translateY(-4px); border-color: var(--pk-copper); }
.pk-note h3 { font-size: var(--step-2); margin-bottom: var(--sp-3); }
.pk-note p { color: var(--pk-slate); margin: 0; }

/* ---------- Page header (vistas internas) ---------- */
.pk-pagehead { background: var(--pk-panel); border-bottom: var(--pk-border); padding-block: 140px 60px; position: relative; overflow: hidden; text-align: center; display: flex; flex-direction: column; align-items: center; }
.pk-pagehead > * { position: relative; z-index: 1; }
.pk-pagehead .pk-wrap { display: flex; flex-direction: column; align-items: center; }
.pk-pagehead h1 { color: var(--pk-ink); font-size: var(--step-4); }
.pk-pagehead p { color: var(--pk-slate); margin-top: var(--sp-4); max-width: 56ch; margin-inline: auto; }

/* ---------- Footer ---------- */
.pk-footer { background: var(--pk-panel); border-top: var(--pk-border); color: var(--pk-slate); padding-block: var(--sp-8); }
.pk-footer h4 { color: var(--pk-ink); font-family: var(--pk-sans); font-size: var(--step-0); margin-bottom: var(--sp-4); text-transform: uppercase; letter-spacing: 2px; }
.pk-footer a { color: var(--pk-slate); transition: color var(--pk-duration) var(--pk-ease); }
.pk-footer a:hover { color: var(--pk-copper); }
.pk-footer__grid { display: grid; gap: var(--sp-7); grid-template-columns: 1fr; padding-bottom: var(--sp-6); }
@media (min-width: 600px) { .pk-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pk-footer__grid { grid-template-columns: 1.5fr 1fr 1fr; gap: var(--sp-8); } }
.pk-footer__brand { font-family: var(--pk-display); font-size: var(--step-3); color: var(--pk-ink); margin-bottom: var(--sp-3); }
.pk-footer__bottom { margin-top: var(--sp-4); padding-top: var(--sp-5); border-top: var(--pk-border); font-size: 13px; display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between; color: var(--pk-slate); letter-spacing: 0.5px; }
.pk-footer__socials { display: flex; gap: var(--sp-4); }
.pk-footer__socials a { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--pk-ink); font-weight: 500; }
.pk-footer__socials a:hover { color: var(--pk-copper); }
.pk-stars { color: var(--pk-copper); font-size: 1.4rem; letter-spacing: 2px; }
.pk-totop { position: fixed; right: 24px; bottom: 24px; z-index: 60; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: var(--pk-copper); color: var(--pk-paper); border-radius: var(--pk-radius-btn); font-size: 1.2rem; border: none; opacity: 0; visibility: hidden; transform: translateY(20px); transition: all 0.4s var(--pk-ease); cursor: pointer; }
.pk-totop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.pk-totop:hover { background: var(--pk-copper-700); transform: translateY(-4px); }

/* ---------- Modal de acceso ---------- */
.pk-modal { position: fixed; inset: 0; z-index: 100; display: none; }
.pk-modal.is-open { display: block; }
.pk-modal__backdrop { position: absolute; inset: 0; background: rgba(26,27,26,0.8); backdrop-filter: blur(4px); }
.pk-modal__dialog { position: relative; max-width: 480px; margin: 10vh auto 0; background: var(--pk-panel); border: var(--pk-border); border-radius: var(--pk-radius-lg); padding: var(--sp-6); max-height: 80vh; overflow-y: auto; }
.pk-modal__x { position: absolute; top: var(--sp-4); right: var(--sp-4); background: var(--pk-paper); border: var(--pk-border); border-radius: var(--pk-radius-btn); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: var(--pk-ink); cursor: pointer; transition: all var(--pk-duration) var(--pk-ease); }
.pk-modal__x:hover { background: var(--pk-copper); color: var(--pk-paper); border-color: var(--pk-copper); }
.pk-authbox__title { font-size: var(--step-3); margin-bottom: var(--sp-2); }
.pk-authbox__hint { font-size: var(--step-0); color: var(--pk-slate); margin-bottom: var(--sp-5); }
.pk-authbox__links { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3); font-size: var(--step-0); margin: var(--sp-4) 0; }
.pk-authbox__links a { color: var(--pk-copper); }
.pk-authbox__links a:hover { color: var(--pk-copper-700); }

/* ---------- Bootstrap Modal Overrides ---------- */
.modal-content { background: var(--pk-panel); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--pk-radius-lg); box-shadow: 0 24px 60px rgba(0,0,0,0.8); color: var(--pk-ink); font-family: var(--pk-sans); }
.modal-header { background: rgba(0, 0, 0, 0.4) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.modal-title { font-family: var(--pk-display); font-size: var(--step-2); color: var(--pk-copper) !important; display: flex; align-items: center; gap: 10px; }
.modal-body { padding: var(--sp-6); }
.modal-footer { border-top: 1px solid rgba(255, 255, 255, 0.05); }
.modal-content table { color: var(--pk-slate); width: 100%; }
.modal-content table td { padding: var(--sp-2) 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); font-size: 15px; }
.modal-content table td strong { color: var(--pk-ink); font-weight: 500; text-transform: uppercase; letter-spacing: 1px; font-size: 13px; display: inline-block; width: 220px; }
.modal-content .badge-info { background: rgba(47, 91, 43, 0.2); border: 1px solid rgba(47, 91, 43, 0.5); color: #b3ffb3; padding: 6px 12px; font-weight: normal; letter-spacing: 1px; }
.modal-content .btn { border-radius: var(--pk-radius-btn); padding: 8px 24px; text-transform: uppercase; letter-spacing: 1px; font-size: 13px; font-weight: 500; border: none; transition: all var(--pk-duration) var(--pk-ease); }
.modal-content .btn-danger, .modal-content .btn-dark { background: rgba(255, 255, 255, 0.05); color: var(--pk-ink); border: 1px solid rgba(255, 255, 255, 0.1); }
.modal-content .btn-danger:hover, .modal-content .btn-dark:hover { background: rgba(255, 255, 255, 0.1); color: #fff; transform: translateY(-2px); }
.pk-gallery { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
@media (min-width: 720px) { .pk-gallery { grid-template-columns: 2fr 1fr; grid-auto-rows: 1fr; } .pk-gallery__main { grid-row: span 2; } }
.pk-gallery figure { margin: 0; border-radius: var(--pk-radius-lg); overflow: hidden; background: var(--pk-paper); aspect-ratio: 3/2; border: var(--pk-border); }
.pk-gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.pk-detail__grid { display: grid; gap: var(--sp-8); }
@media (min-width: 900px) { .pk-detail__grid { grid-template-columns: 1.4fr .9fr; align-items: start; } }
.pk-spec { display: flex; flex-wrap: wrap; gap: var(--sp-5); padding: var(--sp-5) 0; border-block: var(--pk-border); margin: var(--sp-5) 0; }
.pk-spec > div { display: flex; flex-direction: column; gap: var(--sp-1); }
.pk-spec dt { font-size: var(--step-0); color: var(--pk-slate); }
.pk-spec dd { margin: 0; font-family: var(--pk-display); font-size: var(--step-2); color: var(--pk-ink); }
.pk-aside { background: var(--pk-panel); border: var(--pk-border); border-radius: var(--pk-radius-lg); padding: var(--sp-6); position: sticky; top: 120px; }

/* ---------- Contacto ---------- */
.pk-contact__grid { display: grid; gap: var(--sp-8); }
@media (min-width: 860px) { .pk-contact__grid { grid-template-columns: 1fr 1fr; } }
.pk-map { border: var(--pk-border); width: 100%; height: 100%; min-height: 400px; border-radius: var(--pk-radius-lg); }
.pk-contact__info li { display: flex; gap: var(--sp-4); padding: var(--sp-4) 0; border-bottom: var(--pk-border); }
.pk-contact__info strong { min-width: 8rem; color: var(--pk-ink); font-weight: 400; }

/* ---------- Reveal on scroll ---------- */
.pk-reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.8s var(--pk-ease), transform 0.8s var(--pk-ease); }
.pk-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .pk-reveal { opacity: 1; transform: none; transition: none; }
  .pk-carousel__track { scroll-behavior: auto; }
  .pk *, .pk *::before, .pk *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ============================================================================
   Fase 2 — componentes de las vistas internas
   ========================================================================== */

/* ---------- Tarjeta de habitación (rooms) ---------- */
.pk-room { background: var(--pk-panel); border: var(--pk-border); border-radius: var(--pk-radius-lg); overflow: hidden; display: grid; transition: all var(--pk-duration) var(--pk-ease); }
.pk-room:hover { transform: translateY(-4px); border-color: var(--pk-copper); }
@media (min-width: 860px) { .pk-room { grid-template-columns: 360px 1fr auto; align-items: stretch; } }
.pk-room__media { position: relative; aspect-ratio: 3/2; background: var(--pk-paper); overflow: hidden; border-radius: 0; }
@media (min-width: 860px) { .pk-room__media { aspect-ratio: auto; height: 100%; min-height: 260px; } }
.pk-room__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--pk-ease); border-radius: 0; }
.pk-room:hover .pk-room__media img { transform: scale(1.03); }
.pk-room__body { padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); }
.pk-room__title { font-size: var(--step-3); }
.pk-room__desc { color: var(--pk-slate); margin: 0; max-width: 60ch; }
.pk-room__facts { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin-top: auto; padding-top: var(--sp-4); border-top: var(--pk-border); }
.pk-room__facts span { font-size: var(--step-0); color: var(--pk-slate); }
.pk-room__facts strong { color: var(--pk-ink); }
.pk-room__aside { padding: var(--sp-6); border-top: var(--pk-border); display: flex; flex-direction: column; justify-content: center; gap: var(--sp-3); background: var(--pk-paper); min-width: 240px; }
@media (min-width: 860px) { .pk-room__aside { border-top: 0; border-left: var(--pk-border); } }
.pk-room__cap { font-size: var(--step-0); color: var(--pk-slate); }
.pk-rooms-list { display: grid; gap: var(--sp-6); }

/* Amenidades */
.pk-amenities { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.pk-amenities img { width: 40px; height: 40px; object-fit: contain; background: var(--pk-paper); border: var(--pk-border); border-radius: var(--pk-radius-lg); padding: 8px; filter: invert(1); } /* Basic invert for dark theme icons assuming they were dark */

/* ---------- Galería de detalle ---------- */
.pk-photos { display: grid; gap: var(--sp-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .pk-photos { grid-template-columns: repeat(3, 1fr); } }
.pk-photos figure { margin: 0; border-radius: var(--pk-radius-lg); overflow: hidden; background: var(--pk-paper); aspect-ratio: 4/3; border: var(--pk-border); }
.pk-photos img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--pk-ease); border-radius: 0; }
.pk-photos figure:hover img { transform: scale(1.03); }

/* Calendario AJAX dentro de la ficha */
.pk-aside .calendario_ajax { width: 100%; margin: 0; }
.pk-aside .calendario th { background: var(--pk-paper); color: var(--pk-ink); border-bottom: var(--pk-border); padding: var(--sp-2); }
.pk-aside .portlet-title { font-family: var(--pk-display); font-size: var(--step-2); color: var(--pk-ink); margin-bottom: var(--sp-4); }
.pk-aside .btn-default { background: var(--pk-paper); color: var(--pk-ink); border: var(--pk-border); border-radius: var(--pk-radius-btn); padding: var(--sp-2) var(--sp-4); cursor: pointer; transition: all var(--pk-duration) var(--pk-ease); }
.pk-aside .btn-default:hover { background: var(--pk-copper); border-color: var(--pk-copper); }

/* ---------- Editorial ---------- */
.pk-article { max-width: 72ch; margin-inline: auto; }
.pk-article h3 { font-size: var(--step-3); margin: var(--sp-7) 0 var(--sp-4); }
.pk-article p { color: var(--pk-slate); font-size: var(--step-1); line-height: 1.66; }
.pk-prose h3 { font-size: var(--step-2); margin-bottom: var(--sp-3); }
.pk-prose p { color: var(--pk-slate); line-height: 1.66; }

/* Grid de lugares/platos con foto */
.pk-tiles { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; }
@media (min-width: 620px) { .pk-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .pk-tiles { grid-template-columns: repeat(3, 1fr); } }
.pk-tile { background: var(--pk-panel); border: var(--pk-border); border-radius: var(--pk-radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: all var(--pk-duration) var(--pk-ease); }
.pk-tile:hover { transform: translateY(-4px); border-color: var(--pk-copper); }
.pk-tile__media { aspect-ratio: 4/3; background: var(--pk-paper); overflow: hidden; border-radius: 0; }
.pk-tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--pk-ease); border-radius: 0; }
.pk-tile:hover .pk-tile__media img { transform: scale(1.03); }
.pk-tile__body { padding: var(--sp-5); flex: 1; display: flex; flex-direction: column; gap: var(--sp-3); }
.pk-tile__title { font-size: var(--step-2); }
.pk-tile__body p { color: var(--pk-slate); margin: 0; font-size: var(--step-0); line-height: 1.66; }
.pk-tile__link { margin-top: auto; font-size: var(--step-0); color: var(--pk-copper); padding-top: var(--sp-3); }
.pk-tile__link:hover { color: var(--pk-copper-700); }

/* ---------- Booking: contenedores AJAX con Bootstrap acotado ---------- */
.pk-booking-page .boxed { background: rgba(26, 27, 26, 0.6); backdrop-filter: blur(24px); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 16px; padding: var(--sp-6) var(--sp-7); margin-inline: auto; max-width: 1200px; box-shadow: 0 24px 60px rgba(0,0,0,0.5); }
.pk-booking-page legend { font-family: var(--pk-sans); font-size: var(--step-0); border: 0; color: var(--pk-copper); margin-bottom: var(--sp-5); text-transform: uppercase; letter-spacing: 3px; text-align: center; }
.pk-booking-page { font-family: var(--pk-sans); }
.pk-booking-page .btn-primary { background: var(--pk-copper); border-color: var(--pk-copper); border-radius: var(--pk-radius-btn); min-height: 52px; padding: 0 var(--sp-6); font-size: 14px; letter-spacing: 1px; transition: all var(--pk-duration) var(--pk-ease); display: inline-flex; align-items: center; justify-content: center; width: 100%; text-transform: uppercase; }
.pk-booking-page .btn-primary:hover, .pk-booking-page .btn-primary:focus { background: var(--pk-copper-700); border-color: var(--pk-copper-700); outline: none; box-shadow: 0 0 0 2px var(--pk-paper), 0 0 0 4px var(--pk-copper); }

/* Override Bootstrap input-groups and inline styles */
.pk-booking-page .form-control { border-radius: var(--pk-radius); background: rgba(255, 255, 255, 0.03) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; color: var(--pk-ink) !important; padding: 0 20px !important; min-height: 52px; font-weight: 400 !important; font-family: var(--pk-sans); box-shadow: none !important; transition: all var(--pk-duration) var(--pk-ease); }
.pk-booking-page .form-control:focus { border-color: var(--pk-copper) !important; background: rgba(255, 255, 255, 0.06) !important; box-shadow: 0 0 0 1px var(--pk-copper) !important; outline: none; }
.pk-booking-page .form-control:disabled { opacity: 0.5; cursor: not-allowed; background: rgba(0,0,0,0.2) !important; }
.pk-booking-page select.form-control { padding-right: 40px !important; appearance: none; background-image: url("data:image/svg+xml;utf8,<svg fill='%23949494' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>") !important; background-repeat: no-repeat !important; background-position: right 10px center !important; }
.pk-booking-page select.form-control option { background: var(--pk-panel); color: var(--pk-ink); }
.pk-booking-page .input-group { display: flex; flex-direction: column; width: 100%; gap: var(--sp-2); }
.pk-booking-page .input-group-addon { background: transparent; border: none; padding: 0; color: var(--pk-slate); font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 500; text-align: left; display: flex; align-items: center; gap: 8px; width: 100%; }
.pk-booking-page .input-group-addon i { color: var(--pk-copper); font-size: 14px; }
.pk-booking-page .form-group { margin-bottom: var(--sp-4); width: 100%; }
.pk-booking-page .boxed > .row { display: flex; flex-direction: column; gap: var(--sp-4); }
@media (min-width: 768px) { .pk-booking-page .boxed > .row { flex-direction: row; align-items: flex-end; } }
.pk-booking-page #muestrahabitaciones, .pk-booking-page #muestradetallesreservacion { margin-top: var(--sp-6); }

/* ---------- Tablas de Resultados (AJAX) ---------- */
.pk-booking-page .card { background: transparent; border: none; box-shadow: none; }
.pk-booking-page .card-body { padding: 0; }
.pk-booking-page #div3, .pk-booking-page .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--pk-radius-lg); margin-bottom: var(--sp-5); padding-bottom: var(--sp-2); width: 100%; }
.pk-booking-page #div3::-webkit-scrollbar, .pk-booking-page .table-responsive::-webkit-scrollbar { height: 6px; }
.pk-booking-page #div3::-webkit-scrollbar-thumb, .pk-booking-page .table-responsive::-webkit-scrollbar-thumb { background: var(--pk-copper); border-radius: 4px; }
.pk-booking-page .table { width: 100%; min-width: 1000px; border-collapse: separate; border-spacing: 0; border: 1px solid rgba(255, 255, 255, 0.05) !important; border-radius: var(--pk-radius-lg); overflow: hidden; background: rgba(0, 0, 0, 0.2) !important; margin: 0; }
.pk-booking-page .table thead tr { background: rgba(0, 0, 0, 0.4) !important; background-color: rgba(0, 0, 0, 0.4) !important; }
.pk-booking-page .table th { background: transparent !important; color: var(--pk-copper) !important; font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; padding: var(--sp-4) var(--sp-3); border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; border-top: none !important; white-space: nowrap; }
.pk-booking-page .table td { padding: var(--sp-3); vertical-align: middle; border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; border-top: none !important; color: var(--pk-slate) !important; font-size: 14px; background: transparent !important; white-space: nowrap; }
.pk-booking-page .table th:nth-child(4), .pk-booking-page .table td:nth-child(4),
.pk-booking-page .table th:nth-child(5), .pk-booking-page .table td:nth-child(5) { white-space: normal; min-width: 250px; }
.pk-booking-page .table.table-striped > tbody > tr:nth-of-type(odd),
.pk-booking-page .table.table-striped > tbody > tr:nth-of-type(odd) td { background-color: rgba(255, 255, 255, 0.03) !important; }
.pk-booking-page .table.table-striped > tbody > tr:nth-of-type(even),
.pk-booking-page .table.table-striped > tbody > tr:nth-of-type(even) td { background-color: transparent !important; }
.pk-booking-page .table.table-hover > tbody > tr:hover,
.pk-booking-page .table.table-hover > tbody > tr:hover td { background-color: rgba(255, 255, 255, 0.06) !important; }

/* Proteccion para iconos FontAwesome */
.pk .fa, .pk-booking-page .fa, .pk-booking-page i.fa { font-family: 'FontAwesome' !important; font-weight: 400 !important; font-style: normal !important; }

.pk-booking-page .table td .form-control { min-height: 40px; padding: 0 10px !important; }
.pk-booking-page .btn-success { background: var(--pk-copper); border: none; color: #fff; width: 36px; height: 36px; border-radius: 50% !important; padding: 0; display: inline-flex; align-items: center; justify-content: center; transition: all var(--pk-duration) var(--pk-ease); }
.pk-booking-page .btn-success:hover { background: var(--pk-copper-700); transform: translateY(-2px); }
.pk-booking-page .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--pk-copper) !important; border-color: var(--pk-copper) !important; }

/* ---------- Breadcrumb sobrio en pagehead ---------- */
.pk-crumbs { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; justify-content: center; font-size: var(--step-0); color: var(--pk-slate); margin-top: var(--sp-4); }
.pk-crumbs a { color: var(--pk-slate); }
.pk-crumbs a:hover { color: var(--pk-copper); }
.pk-crumbs span[aria-hidden] { opacity: 0.5; }

/* ---------- Mensajes AJAX heredados (alert-*) sin Bootstrap ---------- */
.pk .alert { padding: var(--sp-4); border-radius: var(--pk-radius-lg); border: 1px solid rgba(255,255,255,0.1); margin-bottom: var(--sp-5); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: 10px; }
.pk .alert-danger { background: rgba(138, 59, 34, 0.1); border-color: rgba(138, 59, 34, 0.4); color: #ffb3b3; }
.pk .alert-success { background: rgba(47, 91, 43, 0.1); border-color: rgba(47, 91, 43, 0.4); color: #b3ffb3; }
.pk .alert-info { background: rgba(43, 75, 111, 0.1); border-color: rgba(43, 75, 111, 0.4); color: #b3d9ff; }
.pk .alert .fa { font-size: 16px; }

/* ---------- jQuery UI Datepicker Override ---------- */
#ui-datepicker-div { background: var(--pk-panel); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--pk-radius-lg); box-shadow: 0 10px 30px rgba(0,0,0,0.8); padding: var(--sp-3); font-family: var(--pk-sans); z-index: 9999 !important; }
#ui-datepicker-div .ui-widget-header { background: transparent; border: none; color: var(--pk-ink); font-weight: 500; font-family: var(--pk-display); font-size: var(--step-1); }
#ui-datepicker-div .ui-datepicker-title { text-align: center; line-height: 1.8; }
#ui-datepicker-div .ui-datepicker-prev, #ui-datepicker-div .ui-datepicker-next { cursor: pointer; top: 10px; }
#ui-datepicker-div .ui-datepicker-prev span, #ui-datepicker-div .ui-datepicker-next span { filter: invert(1); }
#ui-datepicker-div th { color: var(--pk-slate); font-weight: 400; font-size: 12px; text-transform: uppercase; padding: var(--sp-2); }
#ui-datepicker-div td { padding: 2px; }
#ui-datepicker-div td .ui-state-default { background: transparent; border: 1px solid transparent; color: var(--pk-ink); text-align: center; border-radius: var(--pk-radius); transition: all 0.2s; padding: 8px; }
#ui-datepicker-div td .ui-state-default:hover { background: rgba(255,255,255,0.1); }
#ui-datepicker-div td .ui-state-active { background: var(--pk-copper); color: #fff; border-color: var(--pk-copper); }