/* ===== TOKENS ===== */
:root{
  --cch-red:#f50504;
  --cch-navy:#29397e;
  --cch-bg:#f7f7f7;
  --cch-card:#fff;
  --cch-shadow:0 12px 30px rgba(0,0,0,.06);
  --cch-radius:16px;
  --header-h:112px; /* alto aproximado del header fijo */
}

html{ scroll-padding-top: calc(var(--header-h) + 12px) !important; }

/* Quita el padding global que pegaba todo a la izquierda */
body{ margin:0; padding:0; background:var(--cch-bg); }

/* NAV */
.nav-link{ color:var(--cch-navy) !important; font-weight:600; }
.nav-link:hover{ text-decoration:underline; }

/* === UNA sola línea roja para header, separadores y footer === */
.lineaRojaGris {
  width: 97%;
  margin: 18px auto 0 auto;
  height: 6px;
  background: #eff1f2;
  background-image: linear-gradient(to bottom, #eff1f2, #d1d1d1);
  border-radius: 8px;
  border: 1px solid #f50504;
  box-sizing: border-box;
  clear: both;
}

.separador{
  width:100%;
  max-width:1200px;
  height:2px;                /* delgada */
  background:var(--cch-red); /* rojo plano */
  border:none;
  border-radius:2px;
  margin:24px auto;
  box-shadow:none;           /* sin gris debajo */
}
.separador{ margin:64px auto 40px; }

/* ===== Bloques ===== */
.section-block{
  background:var(--cch-card);
  border-radius:var(--cch-radius);
  box-shadow:var(--cch-shadow);
  padding:clamp(24px,3vw,44px);
  margin:clamp(24px,4vw,56px) auto;
  max-width:1140px;
  position:relative;
}

/* Títulos y textos */
.section-block h1{ font-weight:800; letter-spacing:-.02em; text-align:center; }
.section-block p, .section-block ul, .section-block ol{ text-align:justify; }
.section-block img{ display:block; margin-inline:auto; height:auto; max-width:100%; }

/* Botones con aire */
.section-block .btn{ margin-inline:.2rem; }

/* Centrar imagen “Nosotros” (y cualquier img dentro de .text-center) */
.text-center img, .imgCenter{ margin-inline:auto !important; }

/* ==== HERO full-bleed (versión index) ==== */
.page-offset{ margin-top: calc(var(--header-h) + 12px); } /* evita que el header tape el hero */

.hero-cch{
  position:relative;
  min-height:62vh;
  background:url('img/image0.png') center/cover no-repeat; /* usa image0.png como pediste */
  border:6px solid var(--cch-red);
  border-radius:16px;
  overflow:hidden;
  box-shadow:var(--cch-shadow);
}
.hero-cch::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.28) 45%, rgba(0,0,0,.08) 70%, rgba(0,0,0,0) 100%);
}
.hero-content{
  position:absolute;
  left:clamp(20px,5vw,60px);
  bottom:clamp(20px,6vh,80px);
  color:#fff;
  max-width:780px;
}
.hero-content h1{
  font-size: clamp(2.8rem, 5vw, 4.8rem); /* más grande */
  font-weight:900;
  margin:0 0 .5rem 0;
}
.hero-content p{ display:none; } /* ocultamos el subtítulo “Estrategia, compras …” */

/* Sello 20 años (look sello de calidad) */
.sello-20{
  position:absolute; right:18px; top:18px;
  width:112px; height:112px; border-radius:50%;
  background:#fff; color:#111;
  border:5px solid var(--cch-red);
  box-shadow:0 10px 24px rgba(0,0,0,.18), inset 0 0 0 3px #fff;
  display:grid; place-items:center; font-weight:900;
}
.sello-20 span{ text-align:center; line-height:1; font-size:17px; letter-spacing:.5px; }

/* Canton thumbs y badges */
.canton-img{ border-radius:12px; } /* base (fuera de Viajes) */
.cch-badge{ background:#edf2ff; color:#1f3a8a; border:1px solid #dbe2ff; padding:.15rem .5rem; border-radius:999px; font-size:.8rem; }
.cch-chip{ display:inline-block; padding:.15rem .5rem; background:#f5f7fa; border:1px solid #e6e8eb; border-radius:999px; font-size:.8rem; }

/* Responsive */
@media (max-width: 992px){
  .hero-cch{ min-height:56vh; }
  .hero-content h1{ font-size: clamp(2.2rem, 7vw, 3rem); }
}

/* ===== HERO (index2) ===== */
#inicio.cch-hero{
  position: relative;
  min-height: 78vh;          /* alto visible */
  display: grid;
  place-items: center;
  overflow: hidden;          /* evita desbordes de la imagen */
}
#inicio.cch-hero img.bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;         /* cubre sin deformar */
  object-position: center 55%;
  filter: brightness(.65);   /* oscurece un poco el fondo */
}
#inicio.cch-hero::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.65));
}
#inicio.cch-hero .inner{
  position: relative;
  z-index: 2;                /* texto por encima del fondo */
}
/* al navegar por #inicio, que el sticky header no lo tape */
#inicio{ scroll-margin-top: 96px; }

@media (max-width: 576px){
  #inicio.cch-hero{ min-height: 70vh; }
}

/* ===== VIAJES — imagen y tarjetas (como en la 1ª captura) ===== */
/* Marco rojo y sombra SOLO para la imagen de Viajes (sin afectar otras canton-img) */
#Viajes img.canton-img{
  border:8px solid var(--cch-red);
  border-radius:22px;
  padding:6px;
  background:#fff;
  box-shadow:0 10px 24px rgba(10,22,70,.08);
}

/* Tarjetas: compatibilidad con las clases existentes (.btnInfo, .btnInfo2) */
#Viajes .btnInfo,
#Viajes .btnInfo2,
#Viajes .info-card{               /* mantiene también .info-card por si la usas */
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  box-shadow:0 8px 20px rgba(10,22,70,.06);
  padding:16px;
}

@media (min-width:768px){
  #Viajes .btnInfo,
  #Viajes .btnInfo2,
  #Viajes .info-card{ min-height:140px; } /* altura pareja en desktop */
}

/* --- VIAJES: quitar borde extra del <img> y mantener sombra --- */
#Viajes img.canton-img{
  border:0;           /* <- quita el borde extra */
  padding:0;
  border-radius:22px;
  box-shadow:0 10px 24px rgba(10,22,70,.08);
}

/* --- VIAJES: tarjetas iguales de alto --- */
#Viajes .cards-row > [class*="col-"]{ display:flex; }          /* columnas estiran */
#Viajes .viajes-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  box-shadow:0 8px 20px rgba(10,22,70,.06);
  padding:16px;
  display:flex;
  flex-direction:column;
  justify-content:center;                                     /* centra vertical */
  align-items:center;                                         /* centra horizontal */
  text-align:center;
  width:100%;
  min-height:140px;                                           /* mismo alto base */
}
@media (min-width: 992px){
  #Viajes .viajes-card{ min-height:170px; }                   /* un poco más en desktop */
}

/* opcional: títulos rojos y precios */
#Viajes .tag-red{ color:var(--cch-red); font-weight:700; }