:root{--g:#07563f;--g2:#0b684c;--o:#ff6a16;--cream:#fff7df;--cream2:#fbf2d5;--ink:#123e32;--line:#e9dec0}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fffaf0;color:var(--ink);font-family:Arial,Helvetica,sans-serif}
a{text-decoration:none;color:inherit}
.top{position:sticky;top:0;z-index:50;background:var(--g);color:#fff;min-height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 4vw;gap:20px;box-shadow:0 2px 10px #0002}
.brand{font-weight:900;letter-spacing:.5px;font-size:18px;white-space:nowrap}.nav{display:flex;gap:24px;align-items:center;font-weight:800;font-size:15px}.nav a{padding:22px 0}.nav a:hover{opacity:.82}.btn{background:var(--o);padding:13px 20px!important;border-radius:999px}
.hero-img{display:block;width:100%;height:auto}
.band{height:74px;background:var(--cream2)}
.visual-section{max-width:1180px;margin:0 auto;padding:56px 24px}
.visual-title{text-align:center;margin:0 0 32px}.visual-title .eyebrow{font-weight:900;color:var(--o);letter-spacing:2px;text-transform:uppercase;font-size:13px}.visual-title h1,.visual-title h2{font-family:Georgia,'Times New Roman',serif;color:var(--g);font-size:clamp(34px,5vw,58px);margin:8px 0 12px;line-height:1.05}.visual-title p{font-size:19px;line-height:1.6;max-width:850px;margin:auto}
.poster{width:min(100%,1050px);display:block;margin:0 auto;border-radius:24px;box-shadow:0 18px 50px #174c3825}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:28px}.card{background:#fff;border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:0 12px 34px #234b3715}.card .body{padding:26px}.tag{display:inline-block;background:#e8f4df;color:var(--g);font-weight:900;border-radius:999px;padding:7px 12px;font-size:12px}.card h3{font-family:Georgia,serif;font-size:29px;color:var(--g);margin:12px 0 8px}.card p{font-size:16px;line-height:1.6;color:#46645a}.price{font-size:26px;font-weight:900;color:var(--o);margin-top:12px}.link{display:inline-block;margin-top:14px;font-weight:900;color:var(--g);border-bottom:2px solid #efc55b}
.info-strip{background:var(--g);color:#fff;padding:30px 5vw;text-align:center;font-size:18px;line-height:1.6}
.contact-box{max-width:900px;margin:30px auto;background:#fff;border-radius:28px;padding:34px;box-shadow:0 16px 45px #194a3520;border:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:20px}.contact-box strong{color:var(--g)}.contact-box a{color:var(--o);font-weight:900}
footer{background:#063d2e;color:#fff;padding:30px;text-align:center;margin-top:0}
.hero-composed{min-height:540px;background:url('header-base.png') center/cover no-repeat;display:grid;place-items:center;padding:80px 24px;position:relative}
.hero-composed:after{content:"";position:absolute;inset:0;background:#063b2b20}.paint{position:relative;z-index:1;background:#fff4d9ec;padding:28px 50px;border-radius:12px;text-align:center;max-width:1050px;box-shadow:0 18px 50px #0002}.paint h1{font-family:Georgia,serif;font-size:clamp(44px,7vw,78px);color:var(--g);margin:0}.paint p{font-size:clamp(20px,3vw,34px);color:var(--o);font-weight:800;margin:10px 0 0}
@media(max-width:980px){.nav{display:none}.top{padding:0 20px}.grid,.contact-box{grid-template-columns:1fr}.band{height:42px}.visual-section{padding:40px 18px}.hero-composed{min-height:380px}.paint{padding:24px}}
@media(max-width:600px){.brand{font-size:14px}.hero-composed{min-height:300px}.paint h1{font-size:42px}.visual-title p{font-size:16px}.card h3{font-size:24px}}


/* --- Ajustes específicos de la portada --- */
.separator{
  height:74px;
  background:var(--cream2);
}

.section-img{
  display:block;
  width:min(100%,1188px);
  height:auto;
  margin-left:auto;
  margin-right:auto;
}

.experience-wrap{
  position:relative;
  width:min(100%,1188px);
  margin-left:auto;
  margin-right:auto;
}

.experience-wrap .section-img{
  width:100%;
  max-width:none;
}

.hotspot{
  position:absolute;
  display:block;
  z-index:5;
}

/* Zonas clicables aproximadas sobre los cuatro bloques de experiencias */
.hotspot.h1{left:4%; top:25%; width:21%; height:52%;}
.hotspot.h2{left:27%; top:25%; width:21%; height:52%;}
.hotspot.h3{left:51%; top:25%; width:21%; height:52%;}
.hotspot.h4{left:75%; top:25%; width:21%; height:52%;}

@media(max-width:980px){
  .separator{height:42px}
  .section-img,.experience-wrap{width:100%}
}