/* =================== VARIABLES GLOBALES =================== */
/* Agrégalas al inicio del archivo si aún no existen */
:root{
  --naranja:#ff7a00;
  --verde:#0c9b63;
  --rojo:#d1322f;
  --gris:#f4f6f8;
  --oscuro:#101418;
  --texto:#1f2937;
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
}

/* =================== (lo que ya tenías) =================== */
/* ========== Utilidades existentes ========== */
.icon-btn {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
}
.btn .ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;margin-right:8px;
}
.btn .ico img{max-width:100%;max-height:100%;object-fit:contain;display:block}

.badge .badge-icon{
  width:16px;height:16px;object-fit:contain;display:inline-block;
  vertical-align:middle;margin-right:6px;
}

/* ========== Bloque GRUPO (corregido) ========== */
.grupo { padding:0; margin:44px 0; }

.grupo-card{
  position:relative;
  max-width:1200px;
  margin:0 auto;
  border-radius:20px;
  overflow:hidden;
  box-shadow:var(--shadow);
  aspect-ratio:16/9;
  background:
    radial-gradient(60% 80% at 70% 20%, rgba(255,255,255,.05), transparent),
    linear-gradient(180deg, #0f0f10, #16181b);
  isolation:isolate;
}
.grupo-card picture,
.grupo-card img { display:block; }
.grupo-card picture { position:absolute; inset:0; z-index:1; }
.grupo-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transform:translateZ(0) scale(1);
  transition:transform .6s ease, filter .6s ease;
  z-index:1;
}
.grupo-card picture > img.grupo-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.grupo-card:hover .grupo-img{
  transform:translateZ(0) scale(1.035);
  filter:saturate(1.05);
}
.grupo-caption{
  position:absolute;
  inset:auto 16px 16px 16px;
  padding:14px 16px;
  border-radius:14px;
  color:#fff;
  backdrop-filter: blur(8px);
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.40));
  border:1px solid rgba(255,255,255,.25);
  z-index:2;
}
.grupo-caption h3{
  margin:6px 0 4px;
  font-family:"Playfair Display",serif;
  font-size:clamp(18px,2.3vw,26px)
}
.grupo-caption p{ margin:0; opacity:.9; font-size:.98rem }
.grupo-tag{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.3);
  font-weight:700; font-size:.9rem;
  z-index:2;
}
.zoom-btn{
  position:absolute; right:16px; top:16px; z-index:2;
  border:0; border-radius:999px; cursor:pointer;
  padding:10px 12px; color:#fff;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(4px);
  transition:transform .2s ease, background .2s ease;
}
.zoom-btn:hover{ transform:scale(1.05); background:rgba(0,0,0,.6); }

/* ===== Lightbox ===== */
.lightbox[hidden]{display:none;}
.lightbox{
  position:fixed; inset:0; z-index:1000;
  display:grid; place-items:center;
}
.lightbox__backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.7);
  backdrop-filter: blur(2px);
}
.lightbox__content{
  position:relative; margin:24px; max-width:min(1200px, 96vw);
  max-height:90vh; border-radius:16px; overflow:hidden; background:#000;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.lightbox__content img{ display:block; width:100%; height:auto; }
.lightbox__close{
  position:absolute; top:10px; right:10px;
  border:0; border-radius:999px; padding:10px 12px; cursor:pointer;
  background:rgba(0,0,0,.55); color:#fff;
}
.grupo-card{ min-height:320px; }

@media (max-width:640px){
  .grupo{ margin:28px 0; }
  .grupo-card{ border-radius:16px; }
  .grupo-caption{
    inset:auto 10px 10px 10px;
    padding:10px 12px;
    border-radius:12px;
  }
  .zoom-btn{ right:10px; top:10px; padding:8px 10px; }
}

/* ====== Tipografía consistente con el header ====== */
header.nav .name .u,
header.nav .menu a,
.section-title,
.step h5,
.hero h2,
.cta-band h3,
.watermark{
  font-family: "Playfair Display", serif !important;
}

/* =================== HEADER GLOBAL (copiado del home) =================== */
header.nav{
  position:sticky; top:0; z-index:50;
  background:#fff; border-bottom:1px solid #eee;
  backdrop-filter:saturate(180%) blur(6px);
}
.nav__wrap{
  max-width:1200px; margin:auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 24px;
}
.brand{display:flex; align-items:center; gap:14px}
.brand img{height:56px; width:auto; border-radius:10px}
.brand .name{font-weight:800; letter-spacing:.3px}
.brand .name span{display:block; line-height:1}
.brand .u{font-family:"Playfair Display",serif; font-size:1.2rem}
.brand .s{font-size:.9rem; color:#6b7280}

.menu{display:flex; gap:0; align-items:center}
.menu a{
  padding:12px 18px; border-radius:10px;
  font-weight:600; color:#222;
  font-family:"Playfair Display",serif;
  font-size:1.2rem; line-height:1;
}
.menu a:hover{ background:var(--gris) }
.menu a + a{ position:relative }
.menu a + a::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:24px; background:#e5e7eb;
}

.cta{
  padding:12px 16px; background:var(--verde); color:#fff;
  border-radius:12px; font-weight:700; box-shadow:var(--shadow)
}
.burger{ display:none; border:0; background:transparent; font-size:1.6rem }

/* Menú móvil */
.mobile{
  display:none; position:absolute; top:100%; left:0; right:0;
  background:#fff; border-bottom:1px solid #eee; z-index:99
}
.mobile a{
  display:block; padding:16px 20px; border-top:1px solid #f1f1f1;
  font-family:"Playfair Display",serif; font-size:1.15rem
}
.mobile.open{ display:block }

@media (max-width:980px){
  .menu{display:none}
  .burger{display:block}
}

/* ===== Banner separador horizontal (banner_gro.jpg) ===== */
.full-banner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100vw;
  margin: 48px 0;
  overflow: hidden;
  isolation: isolate;
}

.full-banner img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  object-position: center;
  /* Altura fija para mantener proporción rectangular */
  height: 120px;
  /* Efecto moderno con sombra sutil */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  /* Bordes suaves opcionales */
  border-radius: 0;
}

/* Efecto de desvanecimiento en los bordes para integración suave */
.full-banner::before,
.full-banner::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  pointer-events: none;
  z-index: 2;
}

.full-banner::before {
  left: 0;
  background: linear-gradient(to right, rgba(255,255,255,0.4), transparent);
}

.full-banner::after {
  right: 0;
  background: linear-gradient(to left, rgba(255,255,255,0.4), transparent);
}

/* Responsive para móviles */
@media (max-width: 768px) {
  .full-banner {
    margin: 32px 0;
  }
  
  .full-banner img {
    height: 80px; /* Más pequeño en móviles */
  }
  
  .full-banner::before,
  .full-banner::after {
    width: 40px; /* Desvanecimiento más sutil en móviles */
  }
}

/* Para pantallas muy pequeñas */
@media (max-width: 480px) {
  .full-banner {
    margin: 24px 0;
  }
  
  .full-banner img {
    height: 60px;
  }
}