:root{
  --ocean:#0b3b3f; --ocean-2:#0e4e52; --teal:#159a91; --teal-2:#2bb7ab;
  --sand:#f8f2e6; --cream:#fdfaf3; --coral:#ef6a43; --coral-dk:#d8532d;
  --gold:#e2a94a; --ink:#10312f; --ink-soft:#4c6462; --line:#e7ddc9;
  --shadow:0 18px 50px -22px rgba(11,59,63,.45);
  --serif:"Fraunces",Georgia,serif; --sans:"DM Sans",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--cream);line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{width:min(1200px,92vw);margin-inline:auto}
.serif{font-family:var(--serif)}
.eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--teal)}

/* Header */
header{position:fixed;inset:0 0 auto;z-index:50;transition:.35s}
header .bar{display:flex;align-items:center;gap:26px;padding:18px 0}
header .brand{display:flex;align-items:center}
header .brand img{height:46px;width:auto;display:block}
header .brand .logo-dark{display:none}  /* el logo se mantiene blanco siempre */
nav.main{display:flex;gap:26px;margin-left:auto;font-weight:500;font-size:14.5px}
nav.main a{color:rgba(255,255,255,.9);position:relative;padding:4px 0}
nav.main a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--gold);transition:.25s}
nav.main a:hover::after{width:100%}
.lang{display:flex;gap:2px;align-items:center;font-size:13px;font-weight:600;color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:999px;overflow:hidden}
.lang a{padding:6px 11px;color:rgba(255,255,255,.75)}
.lang a.on{background:#fff;color:var(--ocean)}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-family:var(--sans);border-radius:999px;padding:12px 22px;cursor:pointer;border:0;font-size:14.5px;transition:.25s;white-space:nowrap}
.btn.coral{background:var(--coral);color:#fff;box-shadow:0 10px 24px -10px rgba(216,83,45,.7)}
.btn.coral:hover{background:var(--coral-dk);transform:translateY(-2px)}
.btn.ghost{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.4);backdrop-filter:blur(6px)}
.btn.ghost:hover{background:rgba(255,255,255,.22)}
.btn.solid{background:var(--ocean);color:#fff}.btn.solid:hover{background:var(--ocean-2);transform:translateY(-2px)}
/* Al hacer scroll: cintillo OSCURO translúcido (no blanco) → el logo blanco se
   mantiene y se ve limpio, sin la "mancha" del logo oscuro sobre blanco. */
header.scrolled{background:rgba(11,59,63,.92);box-shadow:0 6px 30px -18px rgba(0,0,0,.5);backdrop-filter:blur(10px)}
/* Header sólido para páginas internas (sin hero detrás): barra ocean, logo blanco. */
body.solid-head{padding-top:82px}
body.solid-head header{background:var(--ocean);box-shadow:0 6px 30px -18px rgba(0,0,0,.5)}

/* Hero (home) */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;color:#fff}
.hero video,.hero .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:
   linear-gradient(180deg,rgba(8,42,45,.55) 0%,rgba(8,42,45,.05) 32%,rgba(8,42,45,.25) 62%,rgba(8,42,45,.85) 100%)}
.hero .inner{position:relative;z-index:2;width:min(1200px,92vw);margin-inline:auto;padding-bottom:42px}
.hero .kicker{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);
   backdrop-filter:blur(6px);border-radius:999px;padding:7px 15px;font-size:12.5px;font-weight:600;letter-spacing:.04em;margin-bottom:20px}
.hero .kicker .s{width:7px;height:7px;border-radius:50%;background:var(--teal-2);box-shadow:0 0 0 4px rgba(43,183,171,.3)}
.hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(38px,6.4vw,82px);line-height:1.02;letter-spacing:-.015em;max-width:16ch;text-shadow:0 2px 30px rgba(0,0,0,.25)}
.hero h1 em{font-style:italic;color:var(--gold)}
.hero p.lead{max-width:52ch;margin-top:20px;font-size:clamp(15px,1.7vw,19px);color:rgba(255,255,255,.92)}
.quote{margin-top:30px;background:rgba(255,255,255,.96);border-radius:20px;padding:12px;box-shadow:var(--shadow);
   display:grid;grid-template-columns:2fr 2fr auto;gap:8px;max-width:820px;align-items:stretch}
.quote .f{display:flex;flex-direction:column;gap:3px;padding:10px 14px;border-radius:13px;background:var(--cream)}
.quote .f label{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--teal)}
.quote .f select,.quote .f input{border:0;background:transparent;font-family:var(--sans);font-weight:600;color:var(--ink);font-size:15px;outline:none;cursor:pointer;width:100%}
.quote .go .btn{height:100%;width:100%;justify-content:center;font-size:15px}
.hero .trustline{margin-top:16px;font-size:13px;color:rgba(255,255,255,.8);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hero .trustline b{color:#fff;font-weight:600}

/* Page hero (páginas internas) */
.phero{background:linear-gradient(135deg,var(--ocean),var(--teal));color:#fff;padding:44px 0 40px}
.phero .eyebrow{color:var(--teal-2)}
.phero h1{font-family:var(--serif);font-weight:500;font-size:clamp(28px,4.2vw,46px);line-height:1.06;margin-top:6px}
.phero p{color:rgba(255,255,255,.85);margin-top:8px;max-width:60ch}
.crumbs{font-size:13px;color:rgba(255,255,255,.75);margin-bottom:10px}
.crumbs a:hover{color:#fff}

/* Secciones */
section{padding:84px 0}
.shead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:34px;flex-wrap:wrap}
.shead h2{font-family:var(--serif);font-weight:500;font-size:clamp(28px,3.6vw,44px);line-height:1.08;letter-spacing:-.01em;max-width:18ch}
.shead p{color:var(--ink-soft);max-width:46ch;margin-top:8px}

.regions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px}
.regions button,.chips a{font-family:var(--sans);font-weight:600;font-size:14px;border:1px solid var(--line);background:#fff;color:var(--ink-soft);
   border-radius:999px;padding:10px 20px;cursor:pointer;transition:.2s}
.regions button:hover,.chips a:hover{border-color:var(--teal)}
.regions button.on,.chips a.on{background:var(--ocean);color:#fff;border-color:var(--ocean)}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px}

.dgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:start}
.dgrid>*{min-width:0;max-width:none}
.dgrid[hidden]{display:none}  /* pestañas: sin esto, display:grid pisa el atributo hidden y se apilan todas las regiones */
.card{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:3/4;box-shadow:var(--shadow);isolation:isolate;background:var(--ocean)}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.6s cubic-bezier(.2,.7,.2,1)}
.card:hover img{transform:scale(1.08)}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(8,34,36,.86) 100%)}
.card .meta{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:20px;color:#fff}
.card .meta .r{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:700}
.card .meta h3{font-family:var(--serif);font-weight:500;font-size:24px;margin-top:3px}
.card .meta .from{font-size:13px;color:rgba(255,255,255,.9);margin-top:4px}
.card .tag{position:absolute;z-index:2;top:14px;left:14px;background:rgba(255,255,255,.92);color:var(--ocean);font-size:11px;font-weight:700;letter-spacing:.05em;padding:5px 11px;border-radius:999px}
.card.soon{display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,var(--ocean),var(--teal));text-align:center}
.card.soon .s{position:relative;z-index:2;color:#fff;padding:24px}
.card.soon h3{font-family:var(--serif);font-size:26px;font-weight:500}
.card.soon p{font-size:13px;color:rgba(255,255,255,.85);margin-top:6px}
.card.soon::after{display:none}

/* Grid de productos (listado) */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:22px}
.pgrid>*{min-width:0;max-width:none}
.pcard{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:.25s}
.pcard:hover{transform:translateY(-4px)}
.pcard .ph{position:relative;aspect-ratio:16/11;background:var(--ocean)}
.pcard .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pcard .tag{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.94);color:var(--ocean);font-size:11px;font-weight:700;padding:5px 11px;border-radius:999px}
.pcard .b{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.pcard .r{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);font-weight:700}
.pcard h3{font-family:var(--serif);font-weight:500;font-size:20px;line-height:1.15}
.pcard .price{margin-top:auto;font-weight:700;color:var(--coral-dk);font-size:15px}
.pcard .price small{color:var(--ink-soft);font-weight:500}

/* Artículo del blog (contenido en markdown) */
.prose{max-width:720px;color:var(--ink);font-size:17px;line-height:1.72}
.prose h2{font-family:var(--serif);font-weight:500;font-size:28px;margin:34px 0 12px;color:var(--ocean)}
.prose h3{font-family:var(--serif);font-weight:600;font-size:21px;margin:26px 0 8px}
.prose p{margin:0 0 16px}
.prose ul,.prose ol{margin:0 0 16px 22px;display:flex;flex-direction:column;gap:6px}
.prose img{border-radius:14px;margin:22px 0}
.prose a{color:var(--coral-dk);text-decoration:underline;text-underline-offset:2px}
.prose blockquote{border-left:3px solid var(--teal);padding-left:18px;color:var(--ink-soft);font-style:italic;margin:0 0 16px}
.post-cover{margin:26px 0;border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
.post-cover img{width:100%;display:block}
.byline{color:rgba(255,255,255,.85);font-size:14px;margin-top:10px}

/* Placeholder de marca cuando no hay foto */
.noimg{display:grid;place-items:center;background:linear-gradient(150deg,var(--ocean),var(--teal))}
.noimg::after{content:"";width:min(58%,170px);aspect-ratio:924/379;opacity:.4;
   background:url("../img/compay/logo.84ee93bdb4b7.png") center/contain no-repeat}

.empty{text-align:center;padding:60px 0;color:var(--ink-soft)}
.empty h3{font-family:var(--serif);font-size:24px;color:var(--ink);margin-bottom:8px}

/* Detalle de producto */
.detail{display:grid;grid-template-columns:1.7fr .9fr;gap:40px;align-items:start}
.detail .gal{border-radius:20px;overflow:hidden;aspect-ratio:16/10;background:var(--ocean);box-shadow:var(--shadow)}
.detail .gal img{width:100%;height:100%;object-fit:cover}
.detail .title{font-family:var(--serif);font-weight:500;font-size:clamp(26px,3.4vw,40px);line-height:1.08;margin:22px 0 6px}
.detail .sub{color:var(--ink-soft);font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:.06em}
.detail .desc{margin-top:16px;color:var(--ink-soft);white-space:pre-line}
.detail h2{font-family:var(--serif);font-weight:500;font-size:24px;margin:34px 0 12px}
.incl{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.incl ul{list-style:none;display:flex;flex-direction:column;gap:7px}
.incl li{padding-left:24px;position:relative;color:var(--ink-soft);font-size:14.5px}
.incl .yes li::before{content:"✓";position:absolute;left:0;color:var(--teal);font-weight:700}
.incl .no li::before{content:"×";position:absolute;left:0;color:var(--coral-dk);font-weight:700}
.itin{display:flex;flex-direction:column;gap:0;border-left:2px solid var(--line);margin-left:8px}
.itin .day{padding:0 0 22px 22px;position:relative}
.itin .day::before{content:"";position:absolute;left:-7px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px var(--cream)}
.itin .day .n{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal)}
.itin .day h4{font-family:var(--serif);font-weight:500;font-size:18px;margin:2px 0 4px}
.itin .day p{color:var(--ink-soft);font-size:14px}
.itin .day .hotel{font-size:12.5px;color:var(--ink-soft);margin-top:4px}
.aside{position:sticky;top:100px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:var(--shadow)}
.aside .price{font-family:var(--serif);font-size:30px;color:var(--ocean)}
.aside .price small{font-family:var(--sans);font-size:14px;color:var(--ink-soft);font-weight:500}
.aside .meta-row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.aside .meta-row:last-of-type{border-bottom:0}
.aside .meta-row b{color:var(--ink)}
.aside .btn{width:100%;justify-content:center;margin-top:16px}
.aside .note{font-size:12px;color:var(--ink-soft);text-align:center;margin-top:10px}
.deps{display:flex;flex-wrap:wrap;gap:8px}
.deps span{background:var(--sand);border:1px solid var(--line);border-radius:999px;padding:6px 13px;font-size:13px;font-weight:600;color:var(--ocean)}

/* Formulario de cotización (servicios) */
.form-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px;box-shadow:var(--shadow);max-width:680px}
.form-card .row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:14px}
.form-card label{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--teal);margin-bottom:5px}
.form-card input,.form-card select,.form-card textarea{width:100%;border:1px solid var(--line);border-radius:12px;padding:11px 13px;font-family:var(--sans);font-size:15px;color:var(--ink);background:var(--cream);outline:none}
.form-card input:focus,.form-card select:focus,.form-card textarea:focus{border-color:var(--teal)}
.form-card .full{grid-column:1/-1}
.ok-msg{background:#e7f6f2;border:1px solid var(--teal-2);color:var(--ocean);border-radius:14px;padding:16px 18px;margin-bottom:20px;font-weight:600}

/* Valores / confianza */
.vals{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.val .ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:var(--sand);color:var(--teal);margin-bottom:12px;font-size:22px}
.val h3{font-family:var(--serif);font-size:19px;font-weight:600}
.val p{color:var(--ink-soft);font-size:14.5px;margin-top:5px}

.services{background:var(--ocean);color:#fff}
.services .shead h2{color:#fff}.services .shead p{color:rgba(255,255,255,.72)}
.sgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px}
.svc{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:4/5;background:var(--ocean-2)}
.svc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.82;transition:.5s}
.svc:hover img{opacity:1;transform:scale(1.06)}
.svc::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,34,36,.1),rgba(8,34,36,.82))}
.svc .l{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:16px}
.svc .l h3{font-family:var(--serif);font-size:20px;font-weight:500}
.svc .l p{font-size:12.5px;color:rgba(255,255,255,.8);margin-top:2px}
.partners{margin-top:56px;border-top:1px solid var(--line);padding-top:32px;text-align:center}
.partners .t{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;margin-bottom:20px}
.plogos{display:flex;flex-wrap:wrap;gap:38px;align-items:center;justify-content:center}
.plogos img{height:34px;width:auto;opacity:.62;filter:grayscale(1);transition:.3s}
.plogos img:hover{opacity:1;filter:grayscale(0)}

.cta{position:relative;overflow:hidden;border-radius:26px;color:#fff;padding:64px 8%;text-align:center;background:linear-gradient(135deg,var(--ocean) 0%,var(--teal) 100%)}
.cta::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 120%,rgba(226,169,74,.4),transparent 45%)}
.cta h2{position:relative;font-family:var(--serif);font-weight:500;font-size:clamp(28px,4vw,46px);line-height:1.08}
.cta p{position:relative;color:rgba(255,255,255,.9);margin:12px auto 26px;max-width:48ch}
.cta .row{position:relative;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

footer{background:var(--ocean);color:rgba(255,255,255,.8);padding:64px 0 30px}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:34px}
footer .flogo{height:66px;width:auto;margin-bottom:6px}
footer .social{display:flex;gap:11px;margin-top:16px}
footer .social a{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.1);transition:.2s}
footer .social a:hover{background:var(--gold)}
footer .social svg{width:18px;height:18px;fill:rgba(255,255,255,.9)}
footer .social a:hover svg{fill:var(--ocean)}
footer p.small{font-size:13.5px;margin-top:12px;max-width:34ch;color:rgba(255,255,255,.65)}
footer h4{color:#fff;font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px;font-weight:600}
footer ul{list-style:none;display:flex;flex-direction:column;gap:9px;font-size:14px}
footer a:hover{color:var(--gold)}
footer .contact li{display:flex;gap:9px;align-items:flex-start;font-size:14px;margin-bottom:9px}
.fbot{border-top:1px solid rgba(255,255,255,.14);margin-top:40px;padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:rgba(255,255,255,.55)}

.wa{position:fixed;right:20px;bottom:20px;z-index:60;width:56px;height:56px;border-radius:50%;background:#25d366;display:grid;place-items:center;box-shadow:0 12px 30px -8px rgba(37,211,102,.6);transition:.25s}
.wa:hover{transform:scale(1.08)}
.wa svg{width:30px;height:30px;fill:#fff}

@media(max-width:1000px){
  .dgrid{grid-template-columns:repeat(2,1fr)} .sgrid{grid-template-columns:repeat(2,1fr)}
  .vals{grid-template-columns:repeat(2,1fr)} .fgrid{grid-template-columns:1fr 1fr}
  .quote{grid-template-columns:1fr 1fr}
  .detail{grid-template-columns:1fr} .aside{position:static} nav.main{display:none}
}
@media(max-width:560px){
  .sgrid,.vals,.fgrid,.incl,.form-card .row,.quote{grid-template-columns:1fr}
  section{padding:60px 0}
}
@media(max-width:400px){
  .dgrid{grid-template-columns:1fr}
}