@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');

/* ── TOKENS ── */
:root {
  --blue:      #0A6CF5;
  --blue-dark: #0055D4;
  --blue-bg:   #EBF2FF;
  --gold:      #C9963A;
  --navy:      #060F2E;
  --text:      #0B1629;
  --muted:     #6B7A93;
  --line:      #E4E9F0;
  --bg:        #F5F7FA;
  --white:     #FFFFFF;
  --shadow:    0 2px 8px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.07);
  --max:       1180px;
  --r:         12px;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth }
body {
  font-family: 'Inter', sans-serif;
  background: var(--bg); color: var(--text);
  overflow-x: hidden; font-size: 14px;
  line-height: 1.6; -webkit-font-smoothing: antialiased
}
a { text-decoration: none; color: inherit }
img { display: block; max-width: 100% }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px }

/* ── NAV ── */
nav {
  position: sticky; top: 0; z-index: 100;
  height: 60px; padding: 0 32px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px);
}
.nav-logo {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px; font-weight: 800; letter-spacing: -.3px; color: var(--text)
}
.nav-logo span { color: var(--gold) }
.nav-links {
  display: flex; gap: 28px; list-style: none;
  font-size: 13px; font-weight: 500; color: var(--muted)
}
.nav-links a { transition: color .15s }
.nav-links a:hover { color: var(--text) }
.nav-cta {
  padding: 8px 18px; border-radius: var(--r);
  background: var(--blue); color: #fff;
  font-size: 13px; font-weight: 600;
  transition: background .15s
}
.nav-cta:hover { background: var(--blue-dark) }
.back-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 600; color: var(--muted);
  padding: 6px 14px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--white);
  transition: color .15s, border-color .15s
}
.back-btn:hover { color: var(--blue); border-color: var(--blue) }
@media (max-width: 768px) { .nav-links { display: none } nav { padding: 0 20px } }

/* ── HERO ── */
.hero {
  min-height: 540px; position: relative;
  display: flex; align-items: center;
  padding: 80px 32px 64px; overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(160deg, rgba(6,15,46,.82) 0%, rgba(6,15,46,.50) 60%, rgba(6,15,46,.72) 100%),
    url('../img/solola.jpg') center/cover no-repeat;
}
.hero-bg::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 64px;
  background: linear-gradient(0deg, var(--bg), transparent)
}
.hero-inner {
  position: relative; z-index: 1;
  max-width: var(--max); margin: 0 auto; width: 100%
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 999px;
  background: rgba(201,150,58,.16); border: 1px solid rgba(201,150,58,.36);
  color: #F5CE80; font-size: 10.5px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 18px
}
.hero-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(30px, 4.5vw, 54px);
  font-weight: 800; line-height: 1.08; letter-spacing: -.4px;
  color: #fff; max-width: 600px
}
.hero-title .accent { color: #F5CE80 }
.hero-sub {
  margin-top: 14px; font-size: 15px; line-height: 1.70;
  color: rgba(255,255,255,.65); max-width: 440px
}

/* ── SEARCH BOX ── */
.search-box {
  margin-top: 32px; background: var(--white);
  border-radius: 14px; padding: 20px;
  max-width: 740px;
  box-shadow: 0 20px 60px rgba(0,0,0,.28)
}
.search-box h4 {
  font-size: 10px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 14px
}
.search-row {
  display: grid; grid-template-columns: 1.2fr 1fr 1fr auto;
  gap: 8px; align-items: end
}
.search-field { display: flex; flex-direction: column; gap: 4px }
.search-field label {
  font-size: 9.5px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .8px
}
.search-field input, .search-field select {
  padding: 9px 12px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg);
  color: var(--text); font-family: 'Inter', sans-serif; font-size: 13px;
  outline: none; transition: border-color .15s
}
.search-field input:focus, .search-field select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(10,108,245,.09)
}
.search-btn {
  padding: 10px 20px; border-radius: 8px;
  background: var(--blue); color: #fff;
  font-weight: 700; font-size: 13px; border: none;
  cursor: pointer; white-space: nowrap;
  transition: background .15s
}
.search-btn:hover { background: var(--blue-dark) }
@media (max-width: 800px) { .search-row { grid-template-columns: 1fr 1fr } }
@media (max-width: 540px) { .search-row { grid-template-columns: 1fr } .hero { padding: 60px 20px 48px } }
.stats-strip { display: flex; gap: 24px; margin-top: 28px; flex-wrap: wrap }
.strip-stat { display: flex; align-items: center; gap: 10px }
.strip-num { font-size: 24px; font-weight: 800; color: #fff; letter-spacing: -.4px }
.strip-lbl { font-size: 11px; color: rgba(255,255,255,.55); font-weight: 500; line-height: 1.3 }
.strip-div { width: 1px; background: rgba(255,255,255,.18); align-self: stretch }

/* ── SHARED ── */
.container { max-width: var(--max); margin: 0 auto }
.section-label {
  display: inline-block; font-size: 10.5px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--blue); margin-bottom: 8px
}
.section-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(20px, 2.8vw, 32px);
  font-weight: 800; line-height: 1.15; letter-spacing: -.25px; color: var(--text)
}
.section-header {
  display: flex; align-items: flex-end;
  justify-content: space-between; flex-wrap: wrap;
  gap: 12px; margin-bottom: 24px
}

/* ── DESTINOS ── */
.destinos { padding: 64px 32px; background: var(--white) }
.dest-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px; margin-top: 28px
}
.dest-card {
  position: relative; border-radius: var(--r);
  overflow: hidden; cursor: pointer; aspect-ratio: 3/4
}
.dest-card:first-child { grid-row: span 2; aspect-ratio: auto }
.dest-img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease }
.dest-card:hover .dest-img { transform: scale(1.05) }
.dest-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(6,15,46,.85) 100%)
}
.dest-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 16px }
.dest-name { font-size: 15px; font-weight: 700; color: #fff }
.dest-card:first-child .dest-name { font-size: 20px }
.dest-count { font-size: 11px; color: rgba(255,255,255,.60); margin-top: 3px; font-weight: 500 }
.dest-badge {
  position: absolute; top: 10px; left: 10px;
  padding: 3px 10px; border-radius: 5px;
  background: var(--gold); font-size: 10px; font-weight: 700; color: #fff
}
@media (max-width: 860px) { .dest-grid { grid-template-columns: repeat(2,1fr) } .dest-card:first-child { grid-row: span 1 } }
@media (max-width: 480px) { .dest-grid { grid-template-columns: 1fr } .destinos { padding: 48px 20px } }

/* ── HOTEL CARDS ── */
.hoteles { padding: 64px 32px; background: var(--bg) }
.hotel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px }
.hotel-card {
  border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--line); background: var(--white);
  box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 4px 12px rgba(0,0,0,.05);
  transition: transform .22s, box-shadow .22s;
  display: flex; flex-direction: column
}
.hotel-card:hover { transform: translateY(-3px); box-shadow: var(--shadow) }
.hotel-img-wrap { position: relative; overflow: hidden; height: 190px; background: var(--bg) }
.hotel-img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease }
.hotel-card:hover .hotel-img { transform: scale(1.04) }
.hotel-tag {
  position: absolute; top: 8px; left: 8px;
  padding: 3px 9px; border-radius: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: .2px
}
.tag-luxury   { background: rgba(201,150,58,.92); color: #fff }
.tag-boutique { background: rgba(10,108,245,.90); color: #fff }
.tag-eco      { background: rgba(22,120,66,.88); color: #fff }
.tag-resort   { background: rgba(6,15,46,.85); color: #fff }
.hotel-body { padding: 14px 16px 16px; flex: 1; display: flex; flex-direction: column }
.hotel-name { font-size: 14.5px; font-weight: 700; color: var(--text); margin-bottom: 4px; line-height: 1.3 }
.hotel-loc { font-size: 12px; color: var(--muted); margin-bottom: 10px }
.hotel-amenities { display: flex; gap: 5px; flex-wrap: wrap; flex: 1 }
.amenity {
  padding: 2px 8px; border-radius: 4px;
  background: var(--blue-bg); color: var(--blue);
  font-size: 10.5px; font-weight: 600
}
.hotel-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line)
}
.hotel-price { display: flex; flex-direction: column; gap: 1px }
.price-desde { font-size: 9.5px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .5px }
.price-val { font-size: 20px; font-weight: 800; color: var(--blue); letter-spacing: -.3px; line-height: 1 }
.price-noche { font-size: 10px; color: var(--muted) }
.hotel-rating { display: flex; flex-direction: column; align-items: flex-end; gap: 2px }
.rating-num {
  background: var(--blue); color: #fff;
  font-size: 11.5px; font-weight: 700;
  padding: 3px 9px; border-radius: 6px
}
.rating-lbl { font-size: 9.5px; color: var(--muted); font-weight: 500 }
.btn-reservar {
  display: block; width: 100%; padding: 10px;
  border-radius: 8px; margin-top: 12px;
  background: var(--blue); color: #fff;
  border: none; font-weight: 700; font-size: 13px;
  cursor: pointer; text-align: center;
  transition: background .15s, transform .15s
}
.btn-reservar:hover { background: var(--blue-dark); transform: translateY(-1px) }
@media (max-width: 860px) { .hotel-grid { grid-template-columns: 1fr 1fr } }
@media (max-width: 560px) { .hotel-grid { grid-template-columns: 1fr } .hoteles { padding: 48px 20px } }

/* ── PAGINACIÓN ── */
.paginacion {
  display: flex; justify-content: center; align-items: center;
  gap: 5px; margin-top: 32px; flex-wrap: wrap
}
.pag-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 12px;
  border-radius: 7px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--line); background: var(--white);
  color: var(--text); transition: all .15s; cursor: pointer
}
.pag-btn:hover { border-color: var(--blue); color: var(--blue) }
.pag-btn.active { background: var(--blue); color: #fff; border-color: var(--blue) }
.pag-btn.nav-btn { color: var(--blue); border-color: var(--blue) }
.pag-btn.nav-btn:hover { background: var(--blue); color: #fff }
.pag-info { text-align: center; font-size: 12px; color: var(--muted); margin-top: 10px }

/* ── EXPERIENCIA ── */
.exp { padding: 64px 32px; background: var(--white) }
.exp-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 52px; align-items: center; margin-top: 32px
}
.exp-img-wrap { border-radius: 14px; overflow: hidden; box-shadow: var(--shadow) }
.exp-img { width: 100%; height: 380px; object-fit: cover; display: block }
.exp-list { display: flex; flex-direction: column; gap: 8px; margin-top: 22px }
.exp-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px 15px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg);
  transition: border-color .15s, transform .15s
}
.exp-item:hover { border-color: var(--blue); transform: translateX(3px) }
.exp-icon {
  width: 38px; height: 38px; border-radius: 9px;
  background: var(--blue-bg);
  display: grid; place-items: center;
  font-size: 18px; flex-shrink: 0
}
.exp-item-title { font-size: 13.5px; font-weight: 700; color: var(--text); margin-bottom: 2px }
.exp-item-desc { font-size: 12.5px; color: var(--muted); line-height: 1.5 }
@media (max-width: 860px) { .exp-grid { grid-template-columns: 1fr } .exp { padding: 48px 20px } }

/* ── STATS ── */
.stats {
  padding: 60px 32px;
  background: var(--navy);
  border-top: 1px solid rgba(255,255,255,.06)
}
.stats-inner {
  display: grid; grid-template-columns: repeat(4, 1fr);
  max-width: var(--max); margin: 0 auto
}
.stat-item {
  padding: 24px 20px; text-align: center;
  border-right: 1px solid rgba(255,255,255,.08)
}
.stat-item:last-child { border-right: none }
.stat-icon { font-size: 22px; margin-bottom: 10px }
.stat-num {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 40px; font-weight: 800; color: #fff;
  line-height: 1; letter-spacing: -.5px
}
.stat-gold { color: #F5CE80 }
.stat-lbl {
  font-size: 10px; color: rgba(255,255,255,.40);
  font-weight: 600; margin-top: 6px;
  text-transform: uppercase; letter-spacing: .8px
}
@media (max-width: 860px) {
  .stats-inner { grid-template-columns: repeat(2,1fr) }
  .stat-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,.08) }
  .stats { padding: 48px 20px }
}

/* ── REGIONES ── */
.regiones { padding: 64px 32px }
.reg-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px; margin-top: 28px
}
.reg-card {
  padding: 22px 18px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--white);
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
  text-align: center;
  transition: transform .22s, border-color .22s, box-shadow .22s; cursor: pointer
}
.reg-card:hover { transform: translateY(-3px); border-color: var(--blue); box-shadow: var(--shadow) }
.reg-emoji { font-size: 28px; margin-bottom: 10px }
.reg-name { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 3px }
.reg-hoteles { font-size: 11px; color: var(--muted); font-weight: 500 }
.reg-tag {
  display: inline-block; margin-top: 8px;
  padding: 2px 10px; border-radius: 4px;
  background: var(--blue-bg); color: var(--blue);
  font-size: 10.5px; font-weight: 600
}
@media (max-width: 860px) { .reg-grid { grid-template-columns: repeat(2,1fr) } .regiones { padding: 48px 20px } }
@media (max-width: 480px) { .reg-grid { grid-template-columns: 1fr } }

/* ── NEWSLETTER ── */
.newsletter {
  padding: 64px 32px;
  background: var(--bg);
  border-top: 1px solid var(--line);
  text-align: center
}
.nl-box { max-width: 480px; margin: 0 auto }
.nl-icon { font-size: 36px; margin-bottom: 14px }
.nl-form { display: flex; gap: 8px; margin-top: 22px }
.nl-input {
  flex: 1; padding: 10px 14px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--white);
  color: var(--text); font-family: 'Inter', sans-serif; font-size: 13px;
  outline: none; transition: border-color .15s
}
.nl-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(10,108,245,.09) }
.nl-input::placeholder { color: var(--muted) }
.nl-btn {
  padding: 10px 20px; border-radius: 8px;
  background: var(--blue); color: #fff;
  border: none; font-weight: 700; font-size: 13px;
  cursor: pointer; transition: background .15s
}
.nl-btn:hover { background: var(--blue-dark) }
@media (max-width: 480px) { .nl-form { flex-direction: column } .newsletter { padding: 48px 20px } }

/* ── FOOTER ── */
footer { background: var(--navy); padding: 44px 32px 24px }
.footer-grid {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 36px; padding-bottom: 32px;
  border-bottom: 1px solid rgba(255,255,255,.07)
}
.footer-logo { font-size: 16px; font-weight: 800; color: #fff }
.footer-logo span { color: var(--gold) }
.footer-desc {
  font-size: 12.5px; color: rgba(255,255,255,.38);
  line-height: 1.70; margin-top: 10px; max-width: 220px
}
.footer-col h5 {
  font-size: 10px; font-weight: 700; color: rgba(255,255,255,.28);
  text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 12px
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 9px }
.footer-col ul a { font-size: 13px; color: rgba(255,255,255,.45); transition: color .15s }
.footer-col ul a:hover { color: rgba(255,255,255,.88) }
.footer-bottom {
  max-width: var(--max); margin: 20px auto 0;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 8px
}
.footer-copy { font-size: 11.5px; color: rgba(255,255,255,.22) }
.footer-copy a { color: rgba(255,255,255,.38); transition: color .15s }
.footer-copy a:hover { color: #fff }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr } footer { padding: 36px 20px 20px } }

/* ── ARTICULO PAGE ── */
.hero-articulo { position: relative; height: 380px; overflow: hidden }
.hero-img { width: 100%; height: 100%; object-fit: cover; background: var(--bg) }
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 25%, rgba(6,15,46,.85) 100%)
}
.hero-tipo {
  display: inline-block; padding: 3px 12px; border-radius: 5px;
  background: var(--gold); color: #fff;
  font-size: 10.5px; font-weight: 700; letter-spacing: .4px
}
.hero-titulo {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(22px, 3.5vw, 38px); font-weight: 800;
  color: #fff; line-height: 1.1; letter-spacing: -.2px;
  margin: 8px 0 7px
}
.hero-meta {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-size: 12.5px; color: rgba(255,255,255,.78); font-weight: 500
}
.hero-estrellas { color: var(--gold) }
.hero-rating {
  background: var(--blue); color: #fff;
  padding: 3px 11px; border-radius: 5px;
  font-weight: 700; font-size: 12px
}
.main {
  max-width: var(--max); margin: 0 auto;
  padding: 28px 32px 64px;
  display: grid; grid-template-columns: 1fr 280px;
  gap: 20px; align-items: start
}
@media (max-width: 860px) { .main { grid-template-columns: 1fr; padding: 20px 20px 48px } }
.card {
  background: var(--white); border-radius: var(--r);
  border: 1px solid var(--line); padding: 20px;
  margin-bottom: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05)
}
.card h3 {
  font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--line)
}
.desc-text { font-size: 14.5px; line-height: 1.78; color: var(--text) }
.amenidades-grid { display: flex; flex-wrap: wrap; gap: 6px }
.amenidad {
  padding: 5px 11px; border-radius: 6px;
  background: var(--blue-bg); color: var(--blue);
  font-size: 12.5px; font-weight: 600;
  border: 1px solid rgba(10,108,245,.10)
}
.info-row {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 0; border-bottom: 1px solid var(--line)
}
.info-row:last-child { border-bottom: 0 }
.info-lbl { font-size: 9.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted) }
.info-val { font-size: 13.5px; font-weight: 600; color: var(--text) }
.price-big {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 32px; font-weight: 800; color: var(--blue);
  line-height: 1; margin: 4px 0; letter-spacing: -.4px
}
.price-sub { font-size: 11.5px; color: var(--muted) }
.btn-contacto {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; padding: 11px; border-radius: 9px;
  background: var(--blue); color: #fff;
  font-weight: 700; font-size: 13.5px;
  text-align: center; margin-top: 8px;
  transition: background .15s, transform .15s
}
.btn-contacto:hover { background: var(--blue-dark); transform: translateY(-1px) }
.rel-card {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--bg);
  transition: border-color .15s; margin-bottom: 7px
}
.rel-card:hover { border-color: var(--blue) }
.rel-name { font-size: 12.5px; font-weight: 700; color: var(--text) }
.rel-loc { font-size: 11px; color: var(--muted) }
@media (max-width: 600px) { .hero-articulo { height: 260px } }

/* ── REVEAL ── */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .45s ease }
.reveal.visible { opacity: 1; transform: translateY(0) }

/* ── PERFIL HOTEL ── */
.profile-hero {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  padding: 32px 32px 28px
}
.profile-hero-inner {
  max-width: var(--max); margin: 0 auto;
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 20px; flex-wrap: wrap
}
.profile-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(20px, 3.5vw, 30px); font-weight: 800;
  letter-spacing: -.25px; line-height: 1.1; margin-bottom: 10px
}
.profile-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px }
.badge {
  padding: 3px 10px; border-radius: 5px;
  font-size: 11px; font-weight: 700
}
.badge-blue { background: var(--blue-bg); color: var(--blue) }
.badge-gold { background: rgba(201,150,58,.12); color: var(--gold) }
.profile-meta {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 13px; color: var(--muted); font-weight: 500
}
.profile-meta span { display: flex; align-items: center; gap: 4px }
.rating-big { text-align: center; flex-shrink: 0 }
.rating-big .rating-num {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 42px; font-weight: 800; color: var(--blue);
  line-height: 1; letter-spacing: -.5px
}
.rating-big .rating-stars { font-size: 14px; color: var(--gold); margin-top: 4px }
.rating-big .rating-label { font-size: 11px; color: var(--muted); font-weight: 600; margin-top: 2px }

.profile-wrap { max-width: var(--max); margin: 0 auto; padding: 28px 32px 60px }
.profile-grid {
  display: grid; grid-template-columns: 1fr 280px;
  gap: 20px; align-items: start; margin-bottom: 20px
}
.profile-main { min-width: 0 }
.profile-sidebar { min-width: 0 }
@media (max-width: 860px) {
  .profile-grid { grid-template-columns: 1fr }
  .profile-wrap { padding: 20px 20px 48px }
  .profile-hero { padding: 24px 20px 20px }
}

.info-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--line)
}
.info-item:last-of-type { border-bottom: 0 }
.info-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px }
.info-item > div { display: flex; flex-direction: column; gap: 1px; min-width: 0 }
.info-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--muted); display: block
}
.info-value {
  font-size: 13.5px; font-weight: 500; color: var(--text);
  word-break: break-word; display: block
}
.info-value a { color: var(--blue) }
.info-value a:hover { text-decoration: underline }

.btn-wa {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; padding: 11px; border-radius: 9px;
  background: #25D366; color: #fff;
  font-weight: 700; font-size: 13.5px; margin-top: 8px;
  transition: background .15s, transform .15s
}
.btn-wa:hover { background: #1ebe5c; transform: translateY(-1px) }
.btn-tel {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; padding: 10px; border-radius: 9px;
  background: transparent; color: var(--blue);
  border: 1px solid var(--blue);
  font-weight: 700; font-size: 13px; margin-top: 7px;
  transition: background .15s
}
.btn-tel:hover { background: var(--blue-bg) }

.extras-list { list-style: none; display: flex; flex-direction: column; gap: 7px }
.extras-list li {
  display: flex; align-items: center; gap: 9px;
  font-size: 13.5px; color: var(--text)
}
.extras-list li::before {
  content: '✓'; color: var(--blue);
  font-weight: 800; font-size: 12px; flex-shrink: 0
}

.otros-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin-top: 4px }
@media (max-width: 640px) { .otros-grid { grid-template-columns: 1fr } }
.otro-card {
  display: flex; flex-direction: column; gap: 3px;
  padding: 14px 16px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg);
  transition: border-color .15s, background .15s
}
.otro-card:hover { border-color: var(--blue); background: var(--blue-bg) }
.otro-nombre { font-size: 13.5px; font-weight: 700; color: var(--text) }
.otro-zona { font-size: 11.5px; color: var(--muted); font-weight: 500 }
.otro-tipo {
  display: inline-block; margin-top: 5px;
  padding: 2px 8px; border-radius: 4px;
  background: var(--blue-bg); color: var(--blue);
  font-size: 10.5px; font-weight: 600
}

/* ── GALERÍA ── */
.galeria-grid {
  display: flex; flex-direction: column; gap: 16px
}
.galeria-grid img { width: 100%; border-radius: 8px; object-fit: cover }
@media (max-width: 600px) { .galeria-grid { gap: 12px } }