:root{
  --navy:#17324d;
  --blue:#24577a;
  --sand:#f5ead9;
  --cream:#fffaf3;
  --gold:#d9a441;
  --sunset:#e78658;
  --ink:#24313c;
  --muted:#66727d;
  --card:#ffffff;
  --line:#eadfce;
  --shadow:0 10px 30px rgba(23,50,77,.12);
  --radius:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Montserrat, Arial, sans-serif;
  background:linear-gradient(180deg,var(--cream),#fff);
  color:var(--ink);
}
button,a{font:inherit}
button{cursor:pointer}
.app{
  width:min(100%, 980px);
  margin:auto;
  min-height:100vh;
  background:var(--cream);
}
.hero{
  position:relative;
  min-height:clamp(360px,58vw,620px);
  padding:0;
  overflow:hidden;
  color:white;
  background:#fff;
  border-bottom-left-radius:30px;
  border-bottom-right-radius:30px;
  box-shadow:var(--shadow);
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url('assets/embedded_1.png');
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}
.hero::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:34%;
  background:linear-gradient(180deg,transparent,rgba(10,32,55,.22));
  pointer-events:none;
}
.brand{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.logo-wrap{display:flex;align-items:center;gap:12px}
.logo-mark{
  width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.3);
  font-size:28px;
}
.logo-text h1{
  margin:0;
  font-family:Georgia, "Times New Roman", serif;
  font-size:27px;
  letter-spacing:.4px;
}
.logo-text p{margin:2px 0 0;font-size:12px;opacity:.9}
.lang{
  border:1px solid rgba(255,255,255,.35);
  color:white;background:rgba(255,255,255,.12);
  border-radius:999px;padding:8px 11px;
}
.greeting{margin-top:28px}
.greeting h2{margin:0 0 8px;font-size:25px}
.greeting p{margin:0;opacity:.92;line-height:1.5}
.quickbar{
  margin:18px 16px 0;
  background:white;
  border-radius:18px;
  box-shadow:var(--shadow);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  overflow:hidden;
}
.quickbar button{
  border:0;background:white;
  padding:14px 8px;
  color:var(--navy);
}
.quickbar button+button{border-left:1px solid var(--line)}
main{padding:22px 16px 92px}
.section-title{
  display:flex;justify-content:space-between;align-items:end;
  margin:12px 2px 14px;
}
.section-title h3{margin:0;font-size:20px;color:var(--navy)}
.section-title span{font-size:12px;color:var(--muted)}
.grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}
.card{
  border:1px solid var(--line);
  background:var(--card);
  border-radius:var(--radius);
  padding:17px;
  text-align:left;
  box-shadow:0 5px 15px rgba(23,50,77,.06);
  min-height:132px;
  transition:.18s ease;
}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.card .icon{font-size:28px;margin-bottom:18px;display:block}
.card h4{margin:0 0 6px;font-size:16px;color:var(--navy)}
.card p{margin:0;color:var(--muted);font-size:12px;line-height:1.4}
.top-picks{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(210px,70%);
  gap:12px;
  overflow:auto;
  padding:2px 2px 10px;
  scroll-snap-type:x mandatory;
}
.pick{
  scroll-snap-align:start;
  border-radius:22px;
  min-height:168px;
  padding:18px;
  color:white;
  background:linear-gradient(140deg,var(--blue),var(--sunset));
  box-shadow:var(--shadow);
}
.pick .tag{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.8px;
  opacity:.9;
}
.pick h4{font-size:20px;margin:34px 0 8px}
.pick p{margin:0;line-height:1.45;font-size:13px}
.bottom-nav{
  position:fixed;
  left:50%;transform:translateX(-50%);
  bottom:0;
  width:min(100%,980px);
  background:rgba(255,250,243,.96);
  backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(4,1fr);
  padding:9px 8px calc(9px + env(safe-area-inset-bottom));
  z-index:20;
}
.bottom-nav button{
  border:0;background:transparent;color:var(--muted);
  font-size:11px;
}
.bottom-nav span{display:block;font-size:20px;margin-bottom:3px}
.bottom-nav .active{color:var(--navy);font-weight:700}
.panel{
  position:fixed;inset:0;
  background:rgba(20,35,50,.38);
  display:none;align-items:flex-end;
  z-index:40;
}
.panel.open{display:flex}
.sheet{
  width:min(100%,980px);
  margin:auto;
  max-height:88vh;
  overflow:auto;
  border-radius:28px 28px 0 0;
  background:var(--cream);
  padding:18px 16px 32px;
}
.sheet-head{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:16px;
}
.sheet-head h3{margin:0;color:var(--navy)}
.close{
  border:0;background:white;border-radius:50%;
  width:38px;height:38px;font-size:20px;
}
.info{
  background:white;border:1px solid var(--line);
  border-radius:20px;padding:16px;margin-bottom:12px;
}
.info h4{margin:0 0 8px;color:var(--navy)}
.info p{margin:0 0 10px;line-height:1.5;color:var(--muted)}
.meta{font-size:13px;line-height:1.6}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.action{
  border:0;border-radius:14px;padding:13px;
  font-weight:700;
}
.primary{background:var(--navy);color:white}
.secondary{background:var(--sand);color:var(--navy)}
.restaurant-list{display:grid;gap:12px}
.restaurant{
  background:white;border:1px solid var(--line);
  border-radius:20px;padding:16px;
}
.restaurant h4{margin:0 0 4px;color:var(--navy)}
.restaurant .rating{color:#9b6d12;font-weight:700;font-size:13px}
.restaurant p{color:var(--muted);line-height:1.45;font-size:13px}
.badges{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.badge{font-size:11px;background:var(--sand);padding:6px 8px;border-radius:999px}
@media (min-width:700px){
  .hero{padding:34px 38px 36px}
  main{padding:28px 38px 100px}
  .grid{grid-template-columns:repeat(4,1fr)}
  .card{min-height:150px}
  .quickbar{margin:20px 38px 0}
}

@media (max-width:699px){
  .hero{
    min-height:430px;
    border-bottom-left-radius:24px;
    border-bottom-right-radius:24px;
  }
  .hero::before{
    background-size:auto 100%;
    background-position:42% center;
  }
  .lang{
    background:rgba(7,39,75,.82)!important;
    border-color:rgba(255,255,255,.4)!important;
  }
}


.catalogue-map{
  width:100%;
  display:block;
  border-radius:18px;
  border:1px solid var(--line);
  background:white;
}
.source-note{
  font-size:11px;
  line-height:1.45;
  color:var(--muted);
  margin-top:8px;
}
.facility-list{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}
.facility-row{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px 12px;
  border-radius:14px;
  background:white;
  border:1px solid var(--line);
}
.facility-row b{
  color:var(--navy);
}
@media (min-width:700px){
  .facility-list{grid-template-columns:1fr 1fr}
}


.lang{appearance:none;min-width:74px;text-align:center}
.pm-strip{margin:14px 16px 0;padding:12px 14px;border-radius:16px;background:var(--navy);color:white;display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:var(--shadow)}
.pm-strip strong{display:block;font-size:13px}
.pm-strip small{display:block;opacity:.86;line-height:1.35;margin-top:2px}
.pm-strip button{border:0;border-radius:12px;padding:10px 12px;background:var(--gold);color:var(--navy);font-weight:700;white-space:nowrap}
.key-alert{background:#fff6e8;border:1px solid #f0c27b;border-radius:16px;padding:13px 14px;margin-bottom:12px}
.key-alert strong{color:var(--navy)}
@media (min-width:700px){.pm-strip{margin:18px 38px 0}}


.hero-exact-v3{
  position:relative;
  width:100%;
  overflow:hidden;
  background:#fff;
  border-bottom-left-radius:28px;
  border-bottom-right-radius:28px;
  box-shadow:var(--shadow);
}
.hero-exact-v3 > img{
  display:block;
  width:100%;
  height:auto;
}
.lang-on-hero{
  position:absolute;
  top:4.2%;
  right:2.7%;
  z-index:4;
  appearance:none;
  min-width:72px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.45);
  color:#fff;
  background:rgba(12,47,81,.88);
  text-align:center;
}
.hero-hotspot{
  position:absolute;
  z-index:3;
  border:0;
  padding:0;
  background:transparent;
  cursor:pointer;
  border-radius:16px;
}
.hero-hotspot:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:2px;
}
/* Positions correspond exactly to the three original visual areas */
.hotspot-wifi{
  left:6.1%;
  top:69.2%;
  width:27.2%;
  height:14.0%;
}
.hotspot-weather{
  left:33.3%;
  top:69.2%;
  width:31.0%;
  height:14.0%;
}
.hotspot-emergency{
  left:64.3%;
  top:69.2%;
  width:29.5%;
  height:14.0%;
}

/* Apply the original pictogram-card look to the real lower functional tabs */
.exact-pictogram-menu{
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}
.exact-pictogram-menu .card{
  min-height:145px;
  padding:15px 8px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border-radius:20px;
  background:rgba(255,255,255,.98);
  border:1px solid var(--line);
  box-shadow:0 7px 18px rgba(23,50,77,.10);
}
.exact-pictogram-menu .card .icon{
  width:68px;
  height:68px;
  border-radius:50%;
  display:grid;
  place-items:center;
  margin:0 auto 12px;
  background:#fff1dc;
  font-size:31px;
}
.exact-pictogram-menu .card h4{
  margin:0;
  color:var(--navy);
  font-size:14px;
}
.exact-pictogram-menu .card p{display:none}

.weather-current{display:flex;align-items:center;gap:14px}
.weather-icon{
  width:62px;height:62px;border-radius:50%;
  display:grid;place-items:center;background:#fff1dc;font-size:33px
}
.weather-temp{font-size:34px;font-weight:700;color:var(--navy)}
.forecast-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.forecast-day{
  background:white;border:1px solid var(--line);
  border-radius:14px;padding:10px;text-align:center
}
.forecast-day strong{display:block;color:var(--navy)}
.forecast-day span{font-size:12px;color:var(--muted)}
.source-note{font-size:11px;color:var(--muted);line-height:1.4}

@media(min-width:700px){
  .exact-pictogram-menu{grid-template-columns:repeat(4,1fr)}
  .forecast-grid{grid-template-columns:repeat(5,1fr)}
}


/* Corrected Property Management strip */
.pm-strip{
  background:#f5ead9 !important;
  color:#17324d !important;
  border:1px solid #ead7b9 !important;
  box-shadow:0 6px 18px rgba(23,50,77,.08) !important;
}
.pm-strip strong,
.pm-strip small{
  color:#17324d !important;
}
.pm-strip small{
  opacity:.82 !important;
}
.pm-strip button{
  background:#17324d !important;
  color:#ffffff !important;
  border:0 !important;
  border-radius:12px !important;
  padding:10px 15px !important;
}


.catalogue-map{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-height:none !important;
  border-radius:16px;
  border:1px solid var(--line);
  background:#fff;
}


/* ===== Sunset Pulpí Visual Guides ===== */
.visual-guide-launch{
  margin-top:14px;
  padding:12px;
  border:1px solid rgba(200,138,47,.34);
  border-radius:16px;
  background:linear-gradient(135deg,#fffaf1,#ffffff);
}
.visual-guide-launch .visual-guide-title{
  display:block;
  color:#0b2d52;
  font-weight:700;
  margin-bottom:8px;
}
.visual-guide-btn{
  width:100%;
  border:0;
  border-radius:12px;
  padding:12px 14px;
  background:#0b2d52;
  color:#fff;
  font-weight:700;
  cursor:pointer;
}
.visual-guide-overlay{
  display:none;
  position:fixed;
  inset:0;
  z-index:99999;
  background:rgba(4,18,35,.86);
  padding:14px;
  align-items:center;
  justify-content:center;
}
.visual-guide-overlay.open{display:flex}
.visual-guide-shell{
  width:min(900px,100%);
  max-height:95vh;
  overflow:auto;
  background:#fbf6ed;
  border-radius:22px;
  box-shadow:0 28px 80px rgba(0,0,0,.35);
}
.visual-guide-close{
  position:sticky;
  top:10px;
  float:right;
  margin:10px 10px 0 0;
  z-index:2;
  width:42px;height:42px;
  border:0;border-radius:50%;
  background:#fff;color:#0b2d52;
  font-size:24px;cursor:pointer;
  box-shadow:0 4px 18px rgba(0,0,0,.14);
}
.visual-guide-hero{
  padding:28px 24px 22px;
  color:#fff;
  background:
    radial-gradient(circle at 82% 18%, rgba(227,162,60,.22), transparent 24%),
    linear-gradient(120deg,#06284a,#0b3b68);
}
.visual-guide-brand{
  font-family:Georgia,serif;
  font-size:28px;
  letter-spacing:.4px;
}
.visual-guide-tag{
  color:#efb458;
  letter-spacing:2.6px;
  font-size:10px;
  text-transform:uppercase;
  margin-top:3px;
}
.visual-guide-hero h2{
  font-family:Georgia,serif;
  font-size:34px;
  letter-spacing:2px;
  margin:22px 0 5px;
}
.visual-guide-hero p{
  margin:0;
  color:#f1bd69;
  font-size:13px;
}
.visual-guide-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  padding:14px 18px 4px;
}
.visual-guide-item{
  padding:16px 14px;
  border-bottom:1px solid rgba(200,138,47,.22);
}
.visual-guide-item:nth-child(odd){
  border-right:1px solid rgba(200,138,47,.22);
}
.visual-guide-icon{
  width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid #c88a2f;
  border-radius:50%;
  font-size:23px;
  margin-bottom:9px;
}
.visual-guide-item h4{
  margin:0 0 5px;
  color:#0b2d52;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.35px;
}
.visual-guide-item p{
  margin:0;
  color:#27394c;
  font-size:12.5px;
  line-height:1.45;
}
.visual-guide-footer{
  margin:10px 18px 18px;
  padding:14px 16px;
  border:1px solid rgba(200,138,47,.38);
  border-radius:13px;
  text-align:center;
  color:#0b2d52;
  font-family:Georgia,serif;
  font-style:italic;
}
@media(max-width:600px){
  .visual-guide-shell{border-radius:18px;max-height:96vh}
  .visual-guide-hero{padding:24px 18px 18px}
  .visual-guide-brand{font-size:24px}
  .visual-guide-hero h2{font-size:27px}
  .visual-guide-grid{grid-template-columns:1fr;padding:10px 14px 4px}
  .visual-guide-item,
  .visual-guide-item:nth-child(odd){
    border-right:0;
  }
  .visual-guide-item{
    display:grid;
    grid-template-columns:46px 1fr;
    column-gap:10px;
    align-items:start;
    padding:13px 8px;
  }
  .visual-guide-icon{
    grid-row:1/3;
    width:42px;height:42px;
    margin:0;
    font-size:21px;
  }
}


/* ===== Premium Sunset Pulpí Visual Guides – overrides v1 ===== */
.visual-guide-shell{
  background:#f8f1e6;
  border:1px solid rgba(211,160,76,.35);
  overflow:auto;
}
.visual-guide-hero{
  position:relative;
  min-height:310px;
  padding:0;
  background:#082d52 center/cover no-repeat;
  overflow:hidden;
}
.visual-guide-hero::after{
  content:"";
  position:absolute;inset:auto 0 0 0;height:105px;
  background:linear-gradient(to bottom,rgba(248,241,230,0),#f8f1e6 86%);
}
.visual-guide-hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(3,25,48,.42),rgba(3,25,48,.08) 58%,rgba(3,25,48,.18));
}
.visual-guide-hero-copy{
  position:absolute;left:28px;right:28px;bottom:36px;z-index:1;
  color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.4);
}
.visual-guide-hero-copy .visual-guide-kicker{
  color:#f0b150;font-size:10px;letter-spacing:2.8px;text-transform:uppercase;font-weight:700;
}
.visual-guide-hero-copy h2{
  margin:7px 0 4px;font-family:Georgia,serif;font-size:38px;letter-spacing:2.4px;color:#fff;
}
.visual-guide-hero-copy p{margin:0;color:#fff5e7;font-size:13px}
.visual-guide-body-title{
  text-align:center;padding:4px 18px 10px;
  font-family:Georgia,serif;color:#0b2d52;font-size:13px;letter-spacing:1.2px;
}
.visual-guide-grid{
  gap:10px;
  padding:8px 20px 8px;
}
.visual-guide-item{
  background:rgba(255,255,255,.58);
  border:1px solid rgba(200,138,47,.24)!important;
  border-radius:16px;
  padding:16px 15px!important;
  box-shadow:0 5px 16px rgba(37,45,54,.035);
}
.visual-guide-item:nth-child(odd){border-right:1px solid rgba(200,138,47,.24)!important}
.visual-guide-icon{
  background:#fffaf2;
  border:1.5px solid #c88a2f;
  color:#0b2d52;
}
.visual-guide-item h4{font-family:Arial,sans-serif;font-weight:800}
.visual-guide-footer{
  position:relative;
  background:rgba(255,255,255,.58);
  margin:14px 20px 20px;
  padding:18px 20px;
  border-color:rgba(200,138,47,.48);
  font-size:17px;
}
.visual-guide-footer::before{
  content:"♡";
  display:block;color:#c88a2f;font-style:normal;font-size:24px;margin-bottom:4px;
}
.visual-guide-close{
  position:fixed;
  margin:12px;
  right:max(18px,calc((100vw - 900px)/2 + 18px));
  top:18px;
  background:rgba(255,255,255,.96);
}
@media(max-width:600px){
  .visual-guide-overlay{padding:0}
  .visual-guide-shell{width:100%;height:100vh;max-height:100vh;border-radius:0}
  .visual-guide-hero{min-height:265px}
  .visual-guide-hero-copy{left:18px;right:60px;bottom:28px}
  .visual-guide-hero-copy h2{font-size:29px;letter-spacing:1.6px}
  .visual-guide-grid{padding:6px 12px;gap:8px}
  .visual-guide-item{
    grid-template-columns:48px 1fr;
    padding:13px 11px!important;
    border-radius:14px;
  }
  .visual-guide-footer{margin:12px;padding:15px;font-size:15px}
  .visual-guide-close{right:8px;top:8px}
}


/* ===== Premium Visual Guides V2 ===== */

/* Hero only shows the approved original artwork/crop. */
.visual-guide-hero{
  min-height:300px;
  background-position:center top !important;
  background-size:cover !important;
}
.visual-guide-hero-overlay,
.visual-guide-hero-copy{
  display:none !important;
}

/* New wave/title section below hero */
.visual-guide-title-band{
  position:relative;
  margin-top:-30px;
  z-index:2;
  padding:46px 20px 18px;
  text-align:center;
  background:#f8f1e6;
  border-radius:52% 52% 0 0 / 28px 28px 0 0;
}
.visual-guide-title-band::before{
  content:"";
  position:absolute;
  top:20px;
  left:50%;
  transform:translateX(-50%);
  width:66px;
  height:1px;
  background:#c88a2f;
}
.visual-guide-title-band h2{
  margin:0;
  font-family:Georgia,serif;
  font-size:36px;
  letter-spacing:3px;
  color:#0b2d52;
}
.visual-guide-title-band p{
  margin:7px 0 0;
  color:#b5751f;
  font-size:12px;
  letter-spacing:1.8px;
  text-transform:uppercase;
}
.visual-guide-title-shell{
  margin:10px auto 0;
  width:34px;height:22px;
  position:relative;
}
.visual-guide-title-shell:before{
  content:"◡";
  font-size:34px;
  line-height:18px;
  color:#c88a2f;
}

/* Remove redundant guide label */
.visual-guide-body-title{display:none!important}

/* More poster-like cards */
.visual-guide-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  padding:8px 20px 10px;
}
.visual-guide-item{
  min-height:118px;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(200,138,47,.28)!important;
  border-radius:18px;
  padding:16px!important;
  display:grid;
  grid-template-columns:54px 1fr;
  grid-template-rows:auto 1fr;
  column-gap:12px;
  align-items:start;
}
.visual-guide-icon{
  grid-row:1/3;
  width:48px;height:48px;
  margin:0;
  background:#fffaf2;
  color:#0b2d52;
  filter:grayscale(1);
  font-size:22px;
}
.visual-guide-item h4{
  margin:2px 0 5px;
  font-size:13px;
  letter-spacing:.55px;
}
.visual-guide-item p{
  font-size:12.5px;
  line-height:1.45;
}

/* Footer closer to original poster treatment */
.visual-guide-footer{
  background:#fffaf2;
  border:1px solid rgba(200,138,47,.48);
  border-radius:16px;
  margin:14px 20px 20px;
  padding:16px 20px 17px;
  font-size:17px;
}
.visual-guide-footer::before{
  content:"♡";
  color:#c88a2f;
  font-size:22px;
  display:inline-block;
  margin-right:8px;
}

@media(max-width:600px){
  .visual-guide-hero{min-height:225px}
  .visual-guide-title-band{
    margin-top:-24px;
    padding:40px 16px 14px;
    border-radius:50% 50% 0 0 / 22px 22px 0 0;
  }
  .visual-guide-title-band h2{
    font-size:28px;
    letter-spacing:2px;
  }
  .visual-guide-title-band p{
    font-size:10.5px;
    letter-spacing:1.25px;
  }
  .visual-guide-grid{
    grid-template-columns:1fr;
    padding:6px 12px 8px;
    gap:8px;
  }
  .visual-guide-item{
    min-height:0;
    grid-template-columns:48px 1fr;
    padding:13px 11px!important;
  }
  .visual-guide-icon{
    width:42px;height:42px;font-size:20px;
  }
}


/* ===== FINAL APPROVED VISUAL GUIDE STYLE ===== */
.visual-guide-overlay{
  padding:14px;
  background:rgba(4,18,35,.88);
}
.visual-guide-shell{
  width:min(900px,100%);
  max-height:95vh;
  overflow:auto;
  background:#fbf5eb;
  border-radius:24px;
  border:1px solid rgba(210,154,62,.34);
  box-shadow:0 28px 90px rgba(0,0,0,.38);
}
.visual-guide-close{
  position:fixed;
  top:22px;
  right:max(20px,calc((100vw - 900px)/2 + 20px));
  z-index:4;
  width:42px;height:42px;
  border:1px solid rgba(200,138,47,.45);
  border-radius:50%;
  background:rgba(255,255,255,.97);
  color:#0b2d52;
  font-size:23px;
}
.visual-guide-logo-zone{
  background:#fff;
  min-height:190px;
  padding:20px 24px 16px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.visual-guide-logo-zone img{
  width:min(430px,72%);
  max-height:150px;
  object-fit:contain;
}
.visual-guide-theme-photo{
  position:relative;
  height:250px;
  background:center/cover no-repeat;
}
.visual-guide-theme-photo::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-1px;
  height:48px;
  background:#fbf5eb;
  clip-path:ellipse(58% 52% at 50% 100%);
  transform:translateY(26px);
}
.visual-guide-theme-photo::before{
  content:"";
  position:absolute;
  left:0;right:0;bottom:14px;
  height:3px;
  background:#d19a42;
  clip-path:ellipse(58% 52% at 50% 100%);
  transform:translateY(26px);
  z-index:2;
}
.visual-guide-title-band{
  margin:0;
  border-radius:0;
  padding:42px 22px 20px;
  background:#fbf5eb;
  text-align:center;
}
.visual-guide-title-band::before{display:none}
.visual-guide-title-band h2{
  margin:0;
  color:#0b2d52;
  font-family:Georgia,serif;
  font-size:38px;
  letter-spacing:3px;
}
.visual-guide-title-band p{
  margin:8px auto 0;
  max-width:680px;
  color:#a96d20;
  font-family:Georgia,serif;
  font-style:italic;
  font-size:15px;
  letter-spacing:.2px;
  text-transform:none;
}
.visual-guide-title-shell{
  width:72px;
  height:18px;
  margin:12px auto 0;
  position:relative;
}
.visual-guide-title-shell::before,
.visual-guide-title-shell::after{
  content:"";
  position:absolute;
  top:8px;
  width:26px;
  height:1px;
  background:#c88a2f;
}
.visual-guide-title-shell::before{left:0}
.visual-guide-title-shell::after{right:0}
.visual-guide-title-shell{
  background:radial-gradient(circle at 50% 50%, #c88a2f 0 2px, transparent 3px);
}
.visual-guide-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  padding:4px 22px 20px;
  background:#fbf5eb;
}
.visual-guide-item{
  min-height:104px;
  display:grid;
  grid-template-columns:52px 1fr;
  grid-template-rows:auto 1fr;
  column-gap:11px;
  align-items:start;
  padding:14px!important;
  background:rgba(255,255,255,.70);
  border:1px solid rgba(200,138,47,.25)!important;
  border-radius:15px;
  box-shadow:0 5px 14px rgba(41,43,47,.025);
}
.visual-guide-item:nth-child(odd){
  border-right:1px solid rgba(200,138,47,.25)!important;
}
.visual-guide-icon{
  grid-row:1/3;
  width:44px;height:44px;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1.3px solid #c88a2f;
  border-radius:50%;
  background:#fffaf2;
  font-size:20px;
  filter:grayscale(1) sepia(.28);
}
.visual-guide-item h4{
  margin:2px 0 5px;
  color:#0b2d52;
  font-size:12.5px;
  font-weight:800;
  letter-spacing:.45px;
}
.visual-guide-item p{
  margin:0;
  color:#28394c;
  font-size:12.3px;
  line-height:1.45;
}
.visual-guide-footer{
  position:relative;
  margin:0;
  border:0;
  border-radius:0;
  padding:43px 20px 31px;
  background:#062d52;
  color:#e4a343;
  text-align:center;
  font-family:Georgia,serif;
  font-size:20px;
  font-style:italic;
}
.visual-guide-footer::before{
  content:"";
  position:absolute;
  left:0;right:0;top:-25px;
  height:32px;
  background:#062d52;
  clip-path:ellipse(58% 55% at 50% 0%);
  border-top:3px solid #d9a347;
}
.visual-guide-footer::after{
  content:"GOLDEN MOMENTS BY THE SEA";
  display:block;
  margin-top:9px;
  color:#d9a347;
  font-family:Arial,sans-serif;
  font-size:9.5px;
  font-style:normal;
  font-weight:700;
  letter-spacing:3px;
}
@media(max-width:600px){
  .visual-guide-overlay{padding:0}
  .visual-guide-shell{
    width:100%;
    height:100vh;
    max-height:100vh;
    border-radius:0;
  }
  .visual-guide-close{
    right:10px;top:10px;
  }
  .visual-guide-logo-zone{
    min-height:180px;
    padding:22px 18px 16px;
  }
  .visual-guide-logo-zone img{
    width:min(330px,82%);
    max-height:142px;
  }
  .visual-guide-theme-photo{
    height:180px;
  }
  .visual-guide-title-band{
    padding:38px 16px 17px;
  }
  .visual-guide-title-band h2{
    font-size:28px;
    line-height:1.02;
    letter-spacing:2px;
  }
  .visual-guide-title-band p{
    font-size:14px;
    line-height:1.35;
  }
  .visual-guide-grid{
    grid-template-columns:1fr;
    gap:8px;
    padding:4px 12px 18px;
  }
  .visual-guide-item{
    min-height:0;
    grid-template-columns:47px 1fr;
    padding:12px 11px!important;
  }
  .visual-guide-icon{
    width:40px;height:40px;font-size:18px;
  }
  .visual-guide-footer{
    font-size:18px;
    padding:38px 16px 29px;
  }
}


/* ===== FINAL STYLE V3: reliable wave transition ===== */
.visual-guide-theme-photo{
  position:relative;
  overflow:visible !important;
  margin-bottom:34px;
  z-index:1;
}
.visual-guide-theme-photo::after{
  content:"";
  position:absolute;
  left:-5%;
  right:-5%;
  bottom:-36px;
  height:76px;
  background:#fbf5eb;
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
  transform:none !important;
  clip-path:none !important;
  z-index:2;
}
.visual-guide-theme-photo::before{
  content:"";
  position:absolute;
  left:-5%;
  right:-5%;
  bottom:-19px;
  height:4px;
  background:#d19a42;
  border-radius:50%;
  transform:none !important;
  clip-path:none !important;
  z-index:3;
}
.visual-guide-title-band{
  position:relative;
  z-index:4;
  padding-top:24px !important;
}
@media(max-width:600px){
  .visual-guide-theme-photo{
    margin-bottom:30px;
  }
  .visual-guide-theme-photo::after{
    bottom:-32px;
    height:66px;
  }
  .visual-guide-theme-photo::before{
    bottom:-17px;
  }
  .visual-guide-title-band{
    padding-top:20px !important;
  }
}


/* ===== EXACT APPROVED MOCKUP STYLE ===== */
.visual-guide-overlay{
  padding:14px;
  background:rgba(4,18,35,.90);
}
.visual-guide-shell{
  width:min(900px,100%);
  max-height:95vh;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:none;
  -ms-overflow-style:none;
  background:#fbf5eb;
  border-radius:24px;
  box-shadow:0 30px 90px rgba(0,0,0,.40);
}
.visual-guide-shell::-webkit-scrollbar{display:none}
.visual-guide-close{
  position:fixed;
  top:20px;
  right:max(20px,calc((100vw - 900px)/2 + 20px));
  z-index:5;
  width:42px;height:42px;
  border:1px solid rgba(203,145,53,.45);
  border-radius:50%;
  background:rgba(255,255,255,.98);
  color:#0b2d52;
  font-size:23px;
}
.visual-guide-logo-zone{
  background:#fff;
  padding:16px 20px 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:185px;
}
.visual-guide-logo-zone img{
  width:min(420px,72%);
  max-height:150px;
  object-fit:contain;
}
.visual-guide-photo-wrap{
  position:relative;
  height:260px;
  overflow:hidden;
  background:#ddd;
}
.visual-guide-theme-photo{
  position:absolute;
  inset:0;
  margin:0!important;
  background:center/cover no-repeat;
}
.visual-guide-wave{
  position:absolute;
  left:0;right:0;bottom:-1px;
  height:62px;
  z-index:3;
}
.visual-guide-wave svg{
  display:block;
  width:100%;
  height:100%;
}
.visual-guide-title-band{
  background:#fbf5eb;
  padding:16px 22px 20px!important;
  text-align:center;
}
.visual-guide-title-band h2{
  margin:0;
  color:#0b2d52;
  font-family:Georgia,serif;
  font-size:38px;
  letter-spacing:3px;
}
.visual-guide-title-band p{
  margin:8px auto 0;
  max-width:680px;
  color:#a96d20;
  font-family:Georgia,serif;
  font-size:15px;
  font-style:italic;
  line-height:1.35;
}
.visual-guide-shell-mark{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin-top:10px;
}
.visual-guide-shell-mark:before,
.visual-guide-shell-mark:after{
  content:"";
  width:44px;
  height:1px;
  background:#c88a2f;
}
.visual-guide-shell-mark span{
  color:#c88a2f;
  font-size:18px;
}
.visual-guide-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  padding:2px 24px 20px;
  background:#fbf5eb;
}
.visual-guide-item{
  min-height:96px;
  display:grid;
  grid-template-columns:50px 1fr;
  grid-template-rows:auto 1fr;
  column-gap:10px;
  align-items:start;
  padding:14px!important;
  border:1px solid rgba(200,138,47,.25)!important;
  border-radius:14px;
  background:rgba(255,255,255,.72);
  box-shadow:0 4px 12px rgba(0,0,0,.025);
}
.visual-guide-item:nth-child(odd){
  border-right:1px solid rgba(200,138,47,.25)!important;
}
.visual-guide-icon{
  grid-row:1/3;
  width:42px;height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1.25px solid #c88a2f;
  border-radius:50%;
  background:#fffaf2;
  font-size:19px;
  margin:0;
  filter:grayscale(1) sepia(.25);
}
.visual-guide-item h4{
  margin:2px 0 4px;
  color:#0b2d52;
  font-size:12.5px;
  font-weight:800;
  letter-spacing:.35px;
}
.visual-guide-item p{
  margin:0;
  color:#25384b;
  font-size:12.2px;
  line-height:1.4;
}
.visual-guide-footer-wrap{
  position:relative;
  margin-top:8px;
  background:#062d52;
  color:#dfa146;
  padding:42px 20px 28px;
  text-align:center;
}
.visual-guide-footer-wrap .visual-guide-bottom-wave{
  position:absolute;
  left:0;right:0;top:-46px;
  height:54px;
}
.visual-guide-bottom-wave svg{
  width:100%;height:100%;display:block;
}
.visual-guide-footer{
  margin:0!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  color:#dfa146!important;
  font-family:Georgia,serif;
  font-size:19px;
  font-style:italic;
}
.visual-guide-footer::before,
.visual-guide-footer::after{display:none!important}
.visual-guide-footer-sub{
  margin-top:10px;
  color:#d9a347;
  font-family:Arial,sans-serif;
  font-size:9.5px;
  font-weight:700;
  letter-spacing:3px;
}

@media(max-width:600px){
  .visual-guide-overlay{padding:0}
  .visual-guide-shell{
    width:100%;
    height:100vh;
    max-height:100vh;
    border-radius:0;
  }
  .visual-guide-close{right:10px;top:10px}
  .visual-guide-logo-zone{
    min-height:180px;
    padding:18px 14px 14px;
  }
  .visual-guide-logo-zone img{
    width:min(330px,82%);
    max-height:145px;
  }
  .visual-guide-photo-wrap{height:190px}
  .visual-guide-wave{height:48px}
  .visual-guide-title-band{
    padding:12px 16px 17px!important;
  }
  .visual-guide-title-band h2{
    font-size:29px;
    line-height:1.02;
    letter-spacing:2px;
  }
  .visual-guide-title-band p{
    font-size:14px;
    max-width:290px;
  }
  .visual-guide-grid{
    grid-template-columns:1fr;
    gap:8px;
    padding:0 12px 18px;
  }
  .visual-guide-item{
    min-height:0;
    grid-template-columns:47px 1fr;
    padding:12px 11px!important;
  }
  .visual-guide-icon{
    width:40px;height:40px;font-size:18px;
  }
  .visual-guide-footer-wrap{
    padding:38px 14px 26px;
  }
  .visual-guide-footer{
    font-size:18px;
  }
}


/* ===== MOCKUP MATCH V2 — approved visual composition ===== */
.visual-guide-shell{
  width:min(900px,100%);
  max-height:95vh;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:none;
  -ms-overflow-style:none;
  background:#fbf5eb;
  border-radius:24px;
  box-shadow:0 30px 90px rgba(0,0,0,.42);
}
.visual-guide-shell::-webkit-scrollbar{display:none}

.visual-guide-logo-zone{
  min-height:175px;
  padding:16px 20px 14px;
  background:#fff;
}
.visual-guide-logo-zone img{
  width:min(430px,70%);
  max-height:145px;
}

.visual-guide-photo-wrap{
  position:relative;
  height:248px;
  overflow:hidden;
  background:#ddd;
}
.visual-guide-theme-photo{
  position:absolute;
  inset:0;
  background:center/cover no-repeat;
}

/* Approved asymmetric wave: shallow dip-left, crest-mid, rise-right */
.visual-guide-wave{
  position:absolute;
  left:0;right:0;bottom:-1px;height:58px;z-index:3;
}
.visual-guide-wave svg{width:100%;height:100%;display:block}

.visual-guide-title-band{
  padding:12px 22px 18px!important;
  background:#fbf5eb;
}
.visual-guide-title-band h2{
  font-family:Georgia,serif;
  font-size:37px;
  letter-spacing:3px;
  color:#0b2d52;
}
.visual-guide-title-band p{
  margin-top:7px;
  color:#a96d20;
  font-family:Georgia,serif;
  font-style:italic;
  font-size:15px;
  text-transform:none;
}
.visual-guide-shell-mark{
  margin-top:9px;
  gap:9px;
}
.visual-guide-shell-mark:before,
.visual-guide-shell-mark:after{
  width:38px;
  background:#c88a2f;
}

.visual-guide-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  padding:0 24px 24px;
  background:#fbf5eb;
}
.visual-guide-item{
  min-height:92px;
  grid-template-columns:48px 1fr;
  padding:13px!important;
  border-radius:14px;
  border:1px solid rgba(200,138,47,.22)!important;
  background:rgba(255,255,255,.78);
}
.visual-guide-icon{
  width:40px;height:40px;
  background:#fffaf2;
  border:1.2px solid #c88a2f;
  font-size:18px;
  filter:grayscale(1) sepia(.2);
}
.visual-guide-item h4{
  font-size:12.4px;
  margin:1px 0 4px;
}
.visual-guide-item p{
  font-size:12.1px;
  line-height:1.38;
}

.visual-guide-footer-wrap{
  position:relative;
  margin-top:0;
  padding:42px 20px 28px;
  background:#062d52;
}
.visual-guide-bottom-wave{
  position:absolute;
  left:0;right:0;top:-46px;height:56px;
}
.visual-guide-bottom-wave svg{width:100%;height:100%;display:block}
.visual-guide-footer{
  font-size:20px!important;
  color:#dfa146!important;
}
.visual-guide-footer-sub{
  margin-top:10px;
  color:#d9a347;
  font-size:9.5px;
  letter-spacing:3px;
}

.visual-guide-close{
  top:20px;
  right:max(20px,calc((100vw - 900px)/2 + 20px));
}

@media(max-width:600px){
  .visual-guide-overlay{padding:0}
  .visual-guide-shell{
    width:100%;
    height:100vh;
    max-height:100vh;
    border-radius:0;
  }
  .visual-guide-logo-zone{
    min-height:178px;
    padding:18px 14px 14px;
  }
  .visual-guide-logo-zone img{
    width:min(340px,84%);
    max-height:145px;
  }
  .visual-guide-photo-wrap{height:180px}
  .visual-guide-wave{height:48px}
  .visual-guide-title-band{
    padding:11px 14px 16px!important;
  }
  .visual-guide-title-band h2{
    font-size:29px;
    line-height:1.03;
    letter-spacing:2px;
  }
  .visual-guide-title-band p{
    font-size:14px;
    max-width:295px;
  }
  .visual-guide-grid{
    grid-template-columns:1fr;
    gap:8px;
    padding:0 12px 20px;
  }
  .visual-guide-item{
    min-height:0;
    grid-template-columns:46px 1fr;
    padding:12px 11px!important;
  }
  .visual-guide-icon{
    width:39px;height:39px;font-size:17px;
  }
  .visual-guide-footer-wrap{
    padding:38px 14px 27px;
  }
}


/* ===== V3: closer match to approved mockup ===== */
.visual-guide-icon{
  filter:none !important;
  color:#c88a2f !important;
  background:#fffdf8 !important;
  border:1.35px solid #c88a2f !important;
}
.visual-guide-item{
  background:#fffdfa !important;
  border:1px solid rgba(205,151,64,.28)!important;
  box-shadow:none!important;
  min-height:88px!important;
}
.visual-guide-item h4{
  color:#0a2b50!important;
  font-weight:800!important;
  letter-spacing:.35px!important;
}
.visual-guide-title-band{
  padding-top:18px!important;
}
.visual-guide-title-band h2{
  font-size:36px!important;
  letter-spacing:2.6px!important;
}
.visual-guide-title-band p{
  font-size:15px!important;
  color:#a56a1f!important;
}
.visual-guide-footer-wrap{
  min-height:120px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.visual-guide-footer{
  font-size:21px!important;
}
.visual-guide-footer-sub{
  margin-top:14px!important;
}
.house-rules-card .icon{
  filter:none!important;
}
@media(max-width:600px){
  .visual-guide-item{
    min-height:0!important;
  }
  .visual-guide-title-band h2{
    font-size:28px!important;
  }
}


/* ===== FINAL WAVE GEOMETRY + SCROLLBAR FIX ===== */
.visual-guide-shell{
  overflow-x:hidden!important;
  overflow-y:auto!important;
  scrollbar-width:none!important;
  -ms-overflow-style:none!important;
}
.visual-guide-shell::-webkit-scrollbar{
  width:0!important;
  height:0!important;
  display:none!important;
}
.visual-guide-photo-wrap{
  overflow:hidden!important;
  position:relative!important;
}
.visual-guide-wave{
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:-1px!important;
  height:58px!important;
  width:100%!important;
  z-index:3!important;
  pointer-events:none!important;
}
.visual-guide-wave svg,
.visual-guide-bottom-wave svg{
  display:block!important;
  width:100%!important;
  height:100%!important;
}
@media(max-width:600px){
  .visual-guide-wave{height:46px!important;}
}