/* Catalog pages (destinations, categories, activities). Copied to deploy/catalog.css by
   scripts/build_catalog.py and linked as /catalog.css AFTER /planes.css.

   planes.css owns the tokens, the nav, the footer and the type scale. The catalog is WHITE,
   like the homepage (Rafael, 2026-09-16), while the plan pages stay dark, so this file
   repaints planes.css's dark ground with the homepage's light-theme values
   (mockup-v7-carousel.html, "LIGHT THEME"): ink #0e1830, muted #46506a / #6b7488, surface
   #f5f7fa, footer #f0f2f6, gold-on-light #9a7b34. It also adds what the catalog needs: wider
   pages, card grids, the activity layout, the booking box, the related-plans reel and the
   insurance banner. Layout follows buendia.travel's sections and order. */

/* ── white ground: nav, text, footer ── */
body{background:#ffffff;color:#0e1830}
.pl-nav{background:rgba(255,255,255,0.9);border-bottom-color:rgba(10,20,40,0.08)}
.pl-logo,.pl-logo:hover{color:#0e1830}
.pl-logo em{color:#9a7b34}
.pl-back{color:#46506a;border-color:rgba(10,20,40,0.15)}
.pl-back:hover{color:#0e1830;border-color:rgba(10,20,40,0.55)}
h1,h2{color:#0e1830}
strong{color:#0e1830}
footer{background:#f0f2f6;border-top-color:rgba(10,20,40,0.08)}
footer span{color:#8a92a4}
footer nav a{color:#6b7488}
footer nav a:hover{color:#0e1830}

.ct-main{max-width:1180px}
.ct-main a{text-decoration:none}

/* ── breadcrumb, tabs, chips ── */
.ct-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:0.45rem;font-size:0.84rem;
  color:#8a92a4;margin:0 0 1rem}
.ct-crumbs a{color:#46506a}
.ct-crumbs a:hover{color:#0e1830}
.ct-crumbs [aria-current]{color:#8a92a4}
.ct-sep{color:rgba(14,24,48,0.25)}

.ct-tabs{display:flex;gap:1.6rem;overflow-x:auto;border-bottom:1px solid rgba(10,20,40,0.1);
  margin:0 0 1.4rem;scrollbar-width:thin}
.ct-tabs a{flex:0 0 auto;padding:0.6rem 0;font-size:0.95rem;color:#6b7488;
  border-bottom:2px solid transparent;white-space:nowrap}
.ct-tabs a:hover{color:#0e1830}
.ct-tabs a.on{color:#0e1830;font-weight:600;border-bottom-color:#9a7b34}

.ct-chips{display:flex;flex-wrap:wrap;gap:0.6rem;margin:0.6rem 0 1rem}
.ct-chips a{font-size:0.84rem;padding:0.5rem 1rem;border-radius:999px;
  border:1px solid rgba(10,20,40,0.15);color:#46506a;background:#fff}
.ct-chips a:hover{border-color:#9a7b34;color:#0e1830}

/* ── listing headers. The photo hero stays dark, like the homepage hero. ── */
.ct-hero{position:relative;overflow:hidden;border-radius:18px;min-height:clamp(170px,26vw,300px);
  display:grid;place-items:center;background:#0b1426;margin-bottom:1.4rem;isolation:isolate}
.ct-hero::before{content:"";position:absolute;inset:-16px;z-index:-1;background:var(--bg) center/cover;
  filter:blur(4px) brightness(0.42)}
.ct-hero h1{margin:0;padding:1.5rem;text-align:center;text-wrap:balance;color:#fff}
.ct-lead{color:#6b7488;margin:0 0 0.6rem}
h2.ct-count{font-family:var(--font-b);font-size:0.95rem;font-weight:500;color:#6b7488;
  margin:0 0 1rem}

/* /destinos: the title shares its row with the insurance announcement (change 4) */
.ct-title-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1rem 2rem;margin-bottom:0.5rem}
.ct-title-row h1{margin:0}

.ct-group{margin-top:2.6rem}
.ct-group-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:0.4rem 1rem;margin-bottom:1rem}
.ct-group-head h2,.ct-group-head h3{margin:0}
/* city heading inside a country section (our three category pages) */
.ct-group-head h3{font-family:var(--font-h);font-size:1.25rem;color:#0e1830;font-weight:700}
.ct-group .ct-group-head + .ct-grid{margin-bottom:1.6rem}
.ct-more{font-size:0.86rem;font-weight:600;color:#9a7b34}
.ct-more:hover{color:#0e1830}

/* ── activity cards ── */
.ct-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:16px}
.ct-card{display:flex;flex-direction:column;border-radius:14px;overflow:hidden;
  background:#fff;border:1px solid rgba(14,24,48,0.09);box-shadow:0 2px 10px rgba(14,24,48,0.06);
  color:inherit;transition:box-shadow 220ms,transform 220ms,border-color 220ms}
.ct-card:hover{box-shadow:0 12px 32px rgba(14,24,48,0.14);transform:translateY(-2px)}
.ct-card:focus-visible{outline:2px solid #9a7b34;outline-offset:3px}
.ct-card img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:#e8ecf2}
.ct-body{display:flex;flex-direction:column;gap:0.7rem;flex:1;padding:0.9rem 1rem 1rem}
.ct-name{font-weight:600;font-size:0.95rem;line-height:1.35;color:#0e1830}
.ct-meta{margin-top:auto;display:flex;align-items:baseline;justify-content:space-between;gap:0.6rem;
  font-variant-numeric:tabular-nums}
.ct-price{font-family:var(--font-h);font-weight:700;font-size:1.1rem;color:#0e1830;white-space:nowrap}
.ct-price small{font-family:var(--font-b);font-weight:400;font-size:0.72rem;color:#6b7488}
.ct-free{color:#1a7f47}
.ct-soon{font-size:0.78rem;font-weight:600;color:#9a7b34}
.ct-rate{font-size:0.82rem;color:#46506a;white-space:nowrap}
.ct-rate span{color:#8a92a4}
@media(prefers-reduced-motion:reduce){.ct-card{transition:none}.ct-card:hover{transform:none}}

/* ── destination cards (/destinos) ── */
.ct-dests{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.ct-dest{position:relative;display:block;border-radius:14px;overflow:hidden;aspect-ratio:4/3;
  background:#e8ecf2}
.ct-dest img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 400ms}
.ct-dest::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(6,14,31,0.88),rgba(6,14,31,0.05) 60%)}
.ct-dest:hover img{transform:scale(1.04)}
.ct-dest:focus-visible{outline:2px solid #9a7b34;outline-offset:3px}
.ct-dest-body{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:0.9rem 1rem;
  display:flex;flex-direction:column}
.ct-dest-name{font-family:var(--font-h);font-weight:700;font-size:1.15rem;color:#fff}
.ct-dest-count{font-size:0.8rem;color:rgba(255,255,255,0.75)}

/* Each country's row opens with a wide banner shaped like the listing hero (.ct-hero), but the
   country photo stays sharp (Rafael, 2026-09-17, change 7): only a light scrim for the name. */
.ct-country{position:relative;display:grid;place-items:center;overflow:hidden;border-radius:18px;
  min-height:clamp(170px,26vw,300px);background:#0b1426;margin-bottom:0.8rem;isolation:isolate}
.ct-country img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;
  transition:transform 600ms cubic-bezier(0.4,0,0.2,1)}
.ct-country::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(6,14,31,0.34)}
.ct-country h2{margin:0;padding:1.5rem;text-align:center;text-wrap:balance;color:#fff;
  font-size:clamp(2rem,5vw,3.4rem);text-shadow:0 2px 18px rgba(6,14,31,0.45)}
.ct-country:hover img{transform:scale(1.03)}
.ct-country:focus-visible{outline:2px solid #9a7b34;outline-offset:3px}
.ct-group .ct-head-right{justify-content:flex-end}
@media(prefers-reduced-motion:reduce){.ct-dest img,.ct-country img{transition:none}
  .ct-dest:hover img,.ct-country:hover img{transform:none}}

/* ── activity page ──
   Source order is head, sidebar (booking box + insurance card), description. Desktop puts the
   sidebar beside both; a phone stacks them in source order, so the price and the button
   follow the title instead of arriving after the whole description. */
.ct-act{display:grid;grid-template-columns:minmax(0,1fr) 320px;column-gap:2.4rem;align-items:start;
  grid-template-areas:"head side" "text side"}
.ct-act-head{grid-area:head}
.ct-act-text{grid-area:text}
.ct-side{grid-area:side;align-self:start;position:sticky;top:5.5rem;display:flex;flex-direction:column;gap:1rem}
.ct-act-img{display:block;width:100%;max-width:640px;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:16px;background:#e8ecf2;margin-bottom:1.2rem}
.ct-rating{color:#46506a;font-size:0.95rem;margin:0.2rem 0 0}
.ct-rating span{color:#c8a96a}
.ct-rating b{color:#0e1830}
.ct-desc{max-width:68ch}
.ct-desc p{color:#46506a;margin:0 0 0.9rem}
.ct-desc h3{font-family:var(--font-h);font-size:1.15rem;color:#0e1830;margin:1.6rem 0 0.5rem}
.ct-desc ul,.ct-desc ol{color:#46506a;margin:0 0 0.9rem 1.2rem}

.ct-book{background:#fff;border:1px solid rgba(14,24,48,0.12);border-radius:16px;
  box-shadow:0 8px 28px rgba(14,24,48,0.08);padding:1.3rem 1.3rem 1.1rem;
  display:flex;flex-direction:column;gap:0.8rem}
.ct-from{font-family:var(--font-h);font-weight:800;font-size:2rem;color:#0e1830;margin:0;line-height:1.1}
.ct-from small{display:block;font-family:var(--font-b);font-weight:400;font-size:0.82rem;color:#6b7488}
.ct-book .ct-soon{font-size:1.05rem;margin:0}
.ct-book-btn{display:block;text-align:center;font-weight:700;font-size:0.95rem;color:#060e1f;
  background:var(--gold);padding:0.85rem 1rem;border-radius:999px;transition:background 180ms}
.ct-book-btn:hover{background:var(--gold-l);color:#060e1f}
.ct-book-btn:focus-visible{outline:2px solid #9a7b34;outline-offset:3px}
.ct-book-note{font-size:0.76rem;color:#8a92a4;margin:0;text-align:center}

/* ── insurance: the main income, so it is the loudest block on every page (change 5) ──
   Design A, picked by Rafael 2026-09-17: the homepage insurance section's own look — pale grey
   panel, gold eyebrow, heading with a gold italic half, the blue "Ver el plan" button — plus a
   photo that is not one of the homepage's. Every button opens /#seguros (change 6).
   .ct-ins = full-width banner · .ct-ins-mini = compact card (activity sidebar, /destinos title) */
.ct-ins{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);margin:2.6rem 0;
  background:#f5f7fa;border-radius:20px;overflow:hidden}
.ct-ins-copy{display:flex;flex-direction:column;align-items:flex-start;gap:0.7rem;
  padding:clamp(1.4rem,3.5vw,2.6rem)}
.ct-ins-photo{position:relative;display:block;min-height:260px;background:#e8ecf2}
.ct-ins-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ct-ins-eyebrow{font-size:0.72rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
  color:#9a7b34;margin:0}
.ct-ins-title{font-family:var(--font-h);font-weight:800;font-size:clamp(1.5rem,3.2vw,2.15rem);
  line-height:1.12;color:#0e1830;margin:0;text-wrap:balance}
.ct-ins-title em{font-style:italic;color:#c8a96a}
.ct-ins-text{font-size:0.95rem;color:#46506a;margin:0;max-width:54ch}
.ct-ins-points{list-style:none;display:flex;flex-wrap:wrap;gap:0.35rem 1.2rem;margin:0;padding:0}
.ct-ins-points li{font-size:0.85rem;font-weight:600;color:#0e1830}
.ct-ins-points li::before{content:"✓";color:#9a7b34;font-weight:700;margin-right:0.45rem}
.ct-ins-btn{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
  margin-top:0.4rem;font-size:0.95rem;font-weight:700;color:#fff;background:var(--blue);
  padding:0.85rem 1.6rem;border-radius:999px;box-shadow:0 8px 20px rgba(16,64,160,0.22);
  transition:background 200ms}
.ct-ins .ct-ins-btn:hover,.ct-ins-mini .ct-ins-btn:hover{background:var(--blue-mid);color:#fff}
.ct-ins-btn:focus-visible{outline:2px solid #9a7b34;outline-offset:3px}

.ct-ins-mini{display:flex;flex-direction:column;background:#f5f7fa;border-radius:16px;overflow:hidden}
.ct-ins-mini .ct-ins-photo{min-height:0;height:120px}
.ct-ins-mini .ct-ins-copy{gap:0.5rem;padding:1rem 1.1rem 1.15rem;align-items:stretch}
.ct-ins-mini .ct-ins-title{font-size:1.2rem}
.ct-ins-mini .ct-ins-text{font-size:0.86rem}
.ct-ins-mini .ct-ins-btn{width:100%;font-size:0.9rem;padding:0.72rem 1rem}
/* beside the /destinos title: photo on the left, text and button on the right */
.ct-title-row .ct-ins-mini{flex:0 1 460px;flex-direction:row}
.ct-title-row .ct-ins-mini .ct-ins-photo{height:auto;flex:0 0 130px}
@media(prefers-reduced-motion:reduce){.ct-ins-btn{transition:none}}

/* ── "Planes relacionados": the homepage "Visitas guiadas" reel (change 3) ──
   Same mechanics as .eg-strip in mockup-v7-carousel.html: 317x238 cards, the hovered card grows
   to 470px and its neighbours shrink to 250px, "Más planes ‹ ›" appears only when the row
   overflows (/catalog.js). Cards are links to OUR activity pages, never to Buendía. */
.ct-related{margin-top:1rem}
.ct-reel-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.ct-reel-head h2{margin:0}
.ct-reel-more{display:none;align-items:center;gap:0.5rem;white-space:nowrap}
.ct-reel-more.on{display:inline-flex}
.ct-reel-more-label{font-size:0.78rem;font-weight:600;color:#9a7b34}
.ct-arrow{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  border:1px solid rgba(154,123,52,0.4);background:rgba(154,123,52,0.07);
  color:#9a7b34;font-size:1.05rem;line-height:1;cursor:pointer;padding:0;
  font-family:var(--font-b);transition:background 180ms,border-color 180ms,opacity 180ms}
.ct-arrow:hover:not(:disabled){background:rgba(154,123,52,0.18);border-color:#9a7b34}
.ct-arrow:focus-visible{outline:2px solid #9a7b34;outline-offset:2px}
.ct-arrow:disabled{opacity:0.3;cursor:default}
.ct-reel{display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;padding-bottom:0.75rem;
  scroll-snap-type:x proximity;scrollbar-width:thin}
.ct-reel-item{position:relative;flex:0 0 317px;scroll-snap-align:start;
  transition:flex-basis 500ms cubic-bezier(0.4,0,0.2,1)}
.ct-reel-link{display:block;color:inherit}
.ct-reel-pic{position:relative;display:block}
.ct-reel-pic img{width:100%;height:auto;aspect-ratio:317/238;object-fit:cover;display:block;background:#e8ecf2;border-radius:6px}
.ct-reel-shade{position:absolute;inset:0;background:#000;opacity:0.28;border-radius:6px;
  transition:opacity 300ms;pointer-events:none}
.ct-reel-body{display:block;padding:0.6rem 0.1rem 0}
.ct-reel-name{font-size:0.84rem;font-weight:700;color:#0e1830;line-height:1.3;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.2em}
.ct-reel-meta{display:flex;align-items:center;justify-content:space-between;gap:0.5rem;margin-top:0.4rem}
.ct-reel-meta .ct-rate{font-size:0.76rem}
.ct-reel-meta .ct-price{font-family:var(--font-b);font-size:0.95rem}
.ct-reel:hover .ct-reel-item:not(:hover){flex-basis:250px}
.ct-reel-item:hover{flex-basis:470px}
.ct-reel-item:hover .ct-reel-shade{opacity:0}
.ct-reel-link:focus-visible{outline:2px solid #9a7b34;outline-offset:3px}
/* the magnifier and photo viewer: the homepage's .eg-zoom and #egBox (Rafael, 2026-09-17) */
.ct-zoom{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:50%;
  border:0;background:rgba(255,255,255,0.9);color:#0e1830;cursor:pointer;display:grid;
  place-items:center;font-size:0.85rem;line-height:1;opacity:0;transition:opacity 220ms}
.ct-reel-item:hover .ct-zoom,.ct-zoom:focus-visible{opacity:1}
.ct-box{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100%;height:100%}
.ct-box::backdrop{background:rgba(6,14,31,0.94)}
.ct-box-in{position:relative;width:100%;height:100%;display:grid;place-items:center;padding:2.5rem}
.ct-box-img{max-width:min(1100px,92vw);max-height:82vh;object-fit:contain;display:block}
.ct-box-x,.ct-box-prev,.ct-box-next{position:absolute;border:0;background:transparent;color:#fff;
  cursor:pointer;font-size:2rem;line-height:1;padding:0.5rem;opacity:0.8}
.ct-box-x:hover,.ct-box-prev:hover,.ct-box-next:hover{opacity:1}
.ct-box-x{top:0.75rem;right:1rem;font-size:1.8rem}
.ct-box-prev{left:0.75rem;top:50%;transform:translateY(-50%)}
.ct-box-next{right:0.75rem;top:50%;transform:translateY(-50%)}
.ct-box-cap{position:absolute;bottom:1.1rem;left:50%;transform:translateX(-50%);color:#fff;
  text-align:center;font-size:0.85rem;max-width:80vw;margin:0}
.ct-box-cta{color:var(--gold);font-weight:700;white-space:nowrap}
.ct-box-num{display:block;opacity:0.6;font-size:0.75rem;margin-top:0.3rem}
@media(prefers-reduced-motion:reduce){.ct-reel-item,.ct-reel-shade,.ct-zoom{transition:none}}

@media(max-width:900px){
  .ct-reel-item,.ct-reel:hover .ct-reel-item:not(:hover),.ct-reel-item:hover{flex-basis:250px}
  .ct-zoom{opacity:1}
}
@media(max-width:860px){
  .ct-act{grid-template-columns:1fr;grid-template-areas:"head" "side" "text";row-gap:1.4rem}
  .ct-side{position:static}
  .ct-act-img{max-width:none}
  .ct-ins{grid-template-columns:1fr}
  .ct-ins-photo{min-height:180px;order:-1}
}
@media(max-width:560px){
  .ct-grid{grid-template-columns:1fr 1fr;gap:10px}
  .ct-body{padding:0.7rem 0.75rem 0.8rem}
  .ct-name{font-size:0.86rem}
  .ct-meta{flex-direction:column;align-items:flex-start;gap:0.2rem}
  .ct-dests{grid-template-columns:1fr 1fr;gap:10px}
  .ct-ins-btn{width:100%}
  .ct-title-row .ct-ins-mini{flex-direction:column}
  .ct-title-row .ct-ins-mini .ct-ins-photo{flex:none;height:110px}
}