/* Tu Guía Cartagena · hoja 5: tema «Caribe editorial». zip-05 · 12 nov 2026. La cargan todas las páginas, después de main-d.css.
   Qué trae: video del héroe, mosaico «Explora», guías, experiencias, zonas en retrato, tarjetas y secciones con más aire,
   Vitrina del perfil, páginas de guías y pie con eslogan grande. Tamaños en px. Fotos nuevas con respaldo: si falta el archivo, se ve la anterior. */

/* ---- Ritmo y titulares de todo el sitio */
.s{padding-block:92px}
.cab-sec h2.d,.ed-cab h2.d{font-size:clamp(30px,3.1vw,50px);line-height:1.04;letter-spacing:-.012em}
.cab-sec .sec-sub,.ed-cab p{font-size:19px;line-height:1.5;color:var(--niebla);max-width:62ch}
.ed-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:34px}
.ed-cab h2.d{margin:0 0 10px}
.ed-cab h2.d em,.guia-h1 em{font-family:var(--voz);font-style:italic;font-weight:400;letter-spacing:0}
.ed-cab p{margin:0}
.ed-mas{flex:none;display:inline-flex;align-items:center;gap:8px;font:700 16px/1 var(--f);color:var(--noche);text-decoration:none;padding:14px 20px;border:1.5px solid var(--noche);border-radius:999px;transition:background .2s,color .2s}
.ed-mas:hover{background:var(--noche);color:#fff}

/* ---- Héroe: video opcional sobre la imagen (aparece solo cuando el archivo existe y puede reproducirse) */
.hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease;z-index:0;pointer-events:none}
.hero-vid.on{opacity:1}
.hero-velo{z-index:1}
.hero-in{position:relative;z-index:2}
.hero h1.d{letter-spacing:-.02em;text-shadow:0 4px 40px rgba(0,0,0,.45)}
@media (prefers-reduced-motion:reduce){.hero-vid{display:none}}
@media (min-width:721px){.hero-vid{display:none}}   /* en computador solo la imagen (13 nov 2026) */

/* ---- Mosaico «Explora Cartagena» */
.s-mz{padding-block:84px 40px}
.mzs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:250px;gap:16px}
.mzs li:nth-child(1){grid-column:span 2;grid-row:span 2}
.mzs li:nth-child(n+4){grid-column:span 2}
.mz{position:relative;display:flex;flex-direction:column;justify-content:flex-end;height:100%;padding:26px;border-radius:28px;overflow:hidden;color:#fff;text-decoration:none;
  background-color:var(--noche2);background-size:cover;background-position:center;isolation:isolate;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.mz::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(14,27,44,0) 30%,rgba(14,27,44,.86));transition:opacity .3s}
.mz:hover{transform:translateY(-6px);box-shadow:0 30px 60px -28px rgba(14,27,44,.7)}
.mz-k{align-self:flex-start;margin-bottom:auto;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.92);color:var(--noche);font:800 13px/1 var(--f);letter-spacing:.06em;text-transform:uppercase}
.mz b{font:800 27px/1.08 var(--f);font-stretch:106%;letter-spacing:-.01em;max-width:14em}
.mzs li:nth-child(1) .mz b{font-size:clamp(34px,3.2vw,52px)}
.mz small{margin-top:8px;font-size:16px;line-height:1.35;color:#E3E9F1;max-width:36ch}
.mz-ir{position:absolute;right:22px;bottom:22px;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--sol);color:var(--noche);transform:translateY(8px);opacity:0;transition:.3s}
.mz:hover .mz-ir{transform:none;opacity:1}

/* ---- Guías (inicio e índice) */
.s-gui{background:#fff}
.guis{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.gui{display:flex;flex-direction:column;height:100%;text-decoration:none;color:var(--noche)}
.gui-f{display:block;aspect-ratio:4/5;border-radius:24px;background-color:var(--noche2);background-size:cover;background-position:center;position:relative;overflow:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.gui:hover .gui-f{transform:scale(1.02)}
.gui-f span{position:absolute;left:16px;top:16px;padding:7px 12px;border-radius:999px;background:var(--noche);color:var(--sol);font:800 12px/1 var(--f);letter-spacing:.1em;text-transform:uppercase}
.gui b{margin-top:18px;font:800 22px/1.15 var(--f);font-stretch:106%;letter-spacing:-.005em}
.gui small{margin-top:8px;font-size:16px;line-height:1.45;color:var(--niebla)}
.gui i{margin-top:12px;font:400 19px/1 var(--voz);color:var(--coral-h)}

/* ---- Experiencias (banda Azul Noche) */
.s-exp{background:var(--noche);color:#fff;position:relative;overflow:hidden;isolation:isolate}
.s-exp::before{content:"";position:absolute;z-index:-1;left:-10%;top:-40%;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(15,169,166,.34),transparent)}
.s-exp .ed-cab h2.d{color:#fff}
.s-exp .ed-cab p{color:#C9D4E2}
.s-exp .micro{color:var(--sol)}
.xps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.xp{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:440px;padding:30px;border-radius:28px;overflow:hidden;color:#fff;text-decoration:none;background-color:var(--noche2);background-size:cover;background-position:center;isolation:isolate;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.xp::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(14,27,44,.05) 25%,rgba(14,27,44,.92))}
.xp:hover{transform:translateY(-6px)}
.xp b{font:800 30px/1.05 var(--f);font-stretch:106%}
.xp small{margin-top:10px;font-size:17px;line-height:1.4;color:#E3E9F1;max-width:34ch}
.xp span{margin-top:18px;display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:12px 18px;border-radius:999px;border:1.5px solid rgba(255,255,255,.7);font:700 15px/1 var(--f)}
.xp:hover span{background:#fff;color:var(--noche)}

/* ---- Zonas en retrato */
.car-zonas .barrio{min-height:380px;border-radius:26px;background-size:cover;background-position:center;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.car-zonas .barrio:hover{transform:translateY(-6px)}
.car-zonas .barrio b{font-size:26px;font-stretch:106%}

/* ---- Tarjetas de negocio y de descuento */
.card{border-radius:24px;overflow:hidden;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.card:hover{transform:translateY(-5px);box-shadow:0 26px 50px -26px rgba(14,27,44,.45)}
.card .ph img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.card:hover .ph img{transform:scale(1.05)}
.card h3{font-size:21px;letter-spacing:-.005em}
.card .c-precio .num{font-weight:800;color:var(--noche)}

/* ---- Banda de negocios y pie */
.s-neg .banda{padding:64px 56px;border-radius:34px;background:radial-gradient(900px 420px at 88% -10%,rgba(242,180,65,.3),transparent 60%),radial-gradient(700px 400px at 0 110%,rgba(15,169,166,.45),transparent 60%),var(--noche)}
.s-neg .banda h2{font-size:clamp(32px,3.4vw,54px);line-height:1.02}
.s-neg .banda p{font-size:19px;max-width:62ch}
.pie{position:relative}
.pie::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,#1668C7,#0FA9A6 55%,#F2B441 80%,#F0533D)}
.pie-marca .voz{font-size:clamp(28px,2.4vw,38px);line-height:1.08}

/* ---- Vitrina en el perfil */
.f-vit .vit-nota{font-size:15px;color:var(--niebla);margin:6px 0 18px}
.vits{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.vit{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--linea);border-radius:20px;overflow:hidden}
.vit-f{aspect-ratio:4/3;background:var(--espuma) center/cover}
.vit-b{display:flex;flex-direction:column;gap:6px;padding:16px;flex:1}
.vit-b b{font-size:17px;line-height:1.25}
.vit-b small{font-size:14px;line-height:1.35;color:var(--niebla)}
.vit-p{margin-top:auto;padding-top:8px;font:800 20px/1 var(--f);color:var(--noche)}
.vit-a{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 16px 16px;min-height:44px;border-radius:999px;border:1.5px solid var(--noche);color:var(--noche);font:700 15px/1 var(--f);text-decoration:none}
.vit-a:hover{background:var(--noche);color:#fff}

/* ---- Páginas de guías */
.guia .cab-int{padding-bottom:64px;background-size:cover;background-position:center}
.guia .cab-int::before{inset:0;width:auto;aspect-ratio:auto;border-radius:0;background:linear-gradient(90deg,rgba(14,27,44,.96) 30%,rgba(14,27,44,.62))}
.guia-h1{font-size:clamp(38px,4.6vw,72px) !important;max-width:16em !important;letter-spacing:-.02em}
.guia-meta{margin:18px 0 0;font-size:15px;color:var(--niebla-c)}
.guia-c{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:64px;align-items:start;padding-block:64px 88px}
.guia-t section{margin-top:44px}
.guia-t section:first-child{margin-top:0}
.guia-t h2{font:800 30px/1.12 var(--f);font-stretch:106%;margin:0 0 12px;letter-spacing:-.01em}
.guia-t p,.guia-t li{font-size:19px;line-height:1.62;color:#24344A}
.guia-t p{margin:0 0 12px;max-width:68ch}
.guia-t ul,.guia-t ol{margin:0;padding-left:22px;display:grid;gap:8px;max-width:66ch}
.guia-t a{color:var(--azul-h);font-weight:600}
.guia-cita{margin:44px 0 0;padding:6px 0 6px 26px;border-left:4px solid var(--sol);font:400 30px/1.25 var(--voz);font-style:italic;color:var(--noche);max-width:26em}
.guia-l{position:sticky;top:110px;display:grid;gap:14px}
.guia-caja{background:#fff;border:1px solid var(--linea);border-radius:24px;padding:24px}
.guia-caja h2{font:800 18px/1.2 var(--f);margin:0 0 12px}
.guia-caja ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.guia-caja a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:var(--espuma);color:var(--noche);font:600 16px/1.2 var(--f);text-decoration:none}
.guia-caja a:hover{background:var(--noche);color:#fff}
.guia-caja.wa{background:var(--noche);color:#fff;border-color:var(--noche)}
.guia-caja.wa p{margin:0 0 14px;font-size:16px;line-height:1.45;color:#C9D4E2}
.guia-caja.wa .btn2{width:100%;justify-content:center;background:transparent;color:#fff;border-radius:999px;min-height:48px}
.guia-caja.wa .btn2:hover{background:#fff;color:var(--noche)}
.guias-pag{padding-block:56px 88px}

@media (max-width:1240px){
 .guis{grid-template-columns:repeat(2,minmax(0,1fr))}
 .mzs{grid-auto-rows:220px}
}
@media (max-width:900px){
 .s{padding-block:64px}
 .mzs{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:200px}
 .mzs li:nth-child(1){grid-row:span 1}
 .mzs li:nth-child(n+4){grid-column:auto}
 .mzs li:nth-child(6){grid-column:span 2}
 .xps{grid-template-columns:1fr}
 .xp{min-height:320px}
 .guia-c{grid-template-columns:1fr;gap:40px;padding-block:44px 64px}
 .guia-l{position:static}
 .ed-cab{flex-direction:column;align-items:flex-start;gap:16px}
 .s-neg .banda{padding:40px 26px}
}
@media (max-width:640px){
 .mzs{grid-template-columns:1fr;grid-auto-rows:190px;gap:12px}
 .mzs li:nth-child(n){grid-column:auto}
 .mzs li:nth-child(1){grid-row:span 2}
 .mz b{font-size:24px}
 .guis{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
 .gui b{font-size:18px}
 .gui small{display:none}
 .car-zonas .barrio{min-height:300px}
 .guia-t p,.guia-t li{font-size:18px}
 .guia-cita{font-size:24px}
}