:root{
      --kp-orange:#F26D21;
      --kp-bg1:#0A0A0A;
      --kp-bg2:#1B1F3B;
      --kp-text:#EDEDED;
      --kp-muted:#9aa0a6;
      --card:#0f1224;
      --stroke:rgba(255,255,255,.12);
      --radius:16px;
    }
    *{box-sizing:border-box}
    html,body{margin:0;padding:0}
    body{
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
      color:var(--kp-text);
      background:linear-gradient(180deg,var(--kp-bg1),var(--kp-bg2));
      line-height:1.6;
    }
    .wrap{
  max-width:1100px;
  margin-inline:auto;              /* centra de forma correcta */
  padding:32px 20px 80px;
  padding-inline:min(10vw, 80px);  /* “gutter” responsivo con tope */
}
    header.article-header{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;margin-bottom:22px}
    .logos{display:flex;gap:18px;flex-wrap:wrap;align-items:center;justify-content:center}
    .logos img{height: 60px;filter:drop-shadow(0 2px 10px rgba(0,0,0,.25))}
    .badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.06);border:1px solid var(--stroke);padding:6px 12px;border-radius:999px;font-size:10px;color:var(--kp-muted)}
 
    h1{
  /* más chico en móviles, crece hasta 44px */
  font-size: clamp(22px, 6vw, 44px);
  line-height: 1.15;
  margin: 12px 0 6px;
  color: var(--kp-orange);
  letter-spacing: .2px;
  white-space: normal;        /* <- permite romper línea en mobile */
  text-wrap: balance;         /* opcional: reparte mejor las líneas */
  overflow-wrap: anywhere;    /* opcional: evita desbordes extremos */
}

/* En pantallas medianas/grandes, si quieres mantenerlo en una sola línea: */
@media (min-width: 700px){
  h1{
    white-space: nowrap;      /* solo desde 700px en adelante */
    font-size: clamp(28px, 3vw, 48px);  /* puedes subir el máximo aquí si quieres */
  }
}

/* Título multilínea solo para este artículo */
h1.h1--wrap{
  white-space: normal !important;   /* anula el nowrap global */
  text-wrap: balance;               /* reparte mejor las líneas */
  overflow-wrap: anywhere;          /* evita desbordes raros */
  line-height: 1.15;
  letter-spacing: .2px;
  font-size: clamp(22px, 5.2vw, 44px); /* responsivo */
  margin: 12px 0 6px;
  color: var(--kp-orange);
}

/* En pantallas medianas/grandes mantenemos el wrap (no 1 línea) */
@media (min-width: 700px){
  h1.h1--wrap{
    white-space: normal !important;   /* asegura que NO vuelva a una línea */
    font-size: clamp(28px, 3.2vw, 48px);
  }
}

/* (opcional) limitar anchura para que usualmente caiga en 2 líneas en desktop */
@media (min-width: 900px){
  h1.h1--wrap{
    max-width: 980px;
    margin-inline: auto;              /* centrado bonito */
  }
}


    .meta{font-size:14px;color:var(--kp-muted)}
    .hero{
      margin:26px 0 18px;
      background:radial-gradient(1200px 500px at 80% -50%, rgba(242,109,33,.15), transparent 60%),
                 linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
      border:1px solid var(--stroke);
      border-radius:var(--radius);
      overflow:hidden;
    }
    .hero img{width:100%;display:block;object-fit:cover;max-height:520px}
    .section{margin:34px 0}

    /* Hero cuadrada */
.hero--square {
  aspect-ratio: 1 / 1;         /* fuerza contenedor cuadrado */
}

.hero--square img {
  height: 100% !important;     /* prioridad sobre max-height global */
  width: 100%;
  object-fit: cover;
  max-height: none !important; /* ignora el límite de 520px solo aquí */
}

/* Si quieres cuadrado sólo en mobile (opcional) */
@media (min-width: 900px){
  .hero--square{ aspect-ratio: auto; }      /* deja su alto natural en desktop */
  .hero--square img{ height: auto; }        /* respeta proporción original */
}

.hero--fit img {
  width: 100%;
  height: auto !important;      /* conserva proporción */
  object-fit: contain !important;
  max-height: 700px;            /* puedes ajustar este valor */
  background-color: #000;       /* relleno elegante */
  border-radius: 16px;
}

    h2{
      color:var(--kp-orange);
      font-size:clamp(20px,2.4vw,28px);
      margin:0 0 12px;
      padding-bottom:6px;
      border-bottom:2px solid var(--kp-orange);
    }
    h3{color:var(--kp-orange);margin:18px 0 8px;font-size:18px}
    p{margin:10px 0;color:var(--kp-text);  font-size: 12px}
    li{font-size: 12px;}
    .lead{font-size:14px;color:#fff;opacity:.95}
    .grid{
      display:grid;gap:16px;
      grid-template-columns:repeat(12,1fr)
    }
    .col-6{grid-column:span 6}
    .col-12{grid-column:span 12}
    @media(max-width:900px){.col-6{grid-column:span 12}}
    .card{
      background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.02));
      border:1px solid var(--stroke);
      border-radius:var(--radius);
      padding:18px
    }
    .list{padding-left:18px;margin:10px 0}
    .list li{margin:6px 0;color:var(--kp-text)}
    .callout{
      background:rgba(242,109,33,.12);
      border-left:4px solid var(--kp-orange);
      padding:16px;border-radius:10px;margin:18px 0
    }
   .gallery {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(12, 1fr);
}

/* Ajuste base para las imágenes */
.gallery img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  object-fit: cover;
  aspect-ratio: 16 / 10;
  background: #000;
}
    @media(max-width:900px){.span-7,.span-5{grid-column:span 12}}
    /* Testimonios video */
    .video-grid{
      display:grid;
      gap:16px;
      grid-template-columns:repeat(4,1fr)}
    @media(max-width:1100px){
      .video-grid{
        grid-template-columns:repeat(4,1fr)
      }
    }
    @media(max-width:640px){
      .video-grid{grid-template-columns:1fr
      }
    }
    .video-card{
      background:var(--card);border:1px solid var(--stroke);border-radius:18px;padding:12px;
      box-shadow:0 8px 26px rgba(7,8,32,.25)
    }
    .video-wrap{position:relative;width:100%;background:#000;overflow:hidden;border-radius:12px}
    .video-wrap{aspect-ratio:9/16}
    .video-wrap iframe{
      position:absolute;inset:0;width:100%;height:100%;border:0;display:block
    }
    .v-caption{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
    .v-name{font-weight:700}
    .v-role{font-size:12px;color:var(--kp-muted)}

    /* NUEVO: versión con logo y Instagram */
.v-caption--header{
  display:flex;
  align-items:center;
  justify-content:space-between;
 gap:10px;
  flex-wrap:nowrap; 
}

/* Logo fijo (no % para que no empuje el texto) */
.v-logo{
  width:28px;
  height:28px;
  flex:0 0 28px;                /* ancho fijo en el flex */
  object-fit:contain;
  filter:drop-shadow(0 1px 6px rgba(0,0,0,.25));
}

.v-info{
  flex:1 1 auto;
  min-width:0;                  /* permite que el texto se trunque */
}
.v-name{
  font-size: 14px;     /* ajústalo a lo que quieras */
  line-height: 1.2;
}

@media (max-width: 640px){
  .v-caption--header .v-name{ font-size: 13px; }
}

.v-role{
  font-size:12px;
  color:#cfd3d9;
  margin-top:2px;
  line-height:1.2;
}

.v-ig{
  flex:0 0 auto;                /* no se encoge */
  display:inline-flex;
  align-items:center;
}
.v-ig img{
  width:22px;                   /* o 24px si prefieres */
  height:22px;
  display:block;
  transition:transform .25s ease;
}
.v-ig:hover img{ transform:scale(1.08); }

/* (opcional) en pantallas muy pequeñas, permite partir el nombre */
@media (max-width:380px){
  .v-name{ white-space:normal; }
}
    
    .schedule{
      background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
      border:1px solid var(--stroke);border-radius:var(--radius);padding:16px
    }
    .schedule img{width:100%;display:block;border-radius:12px;border:1px solid var(--stroke)}
    .cta{
      margin:46px 0 0;
      text-align:center;
      padding:28px 18px;
      background:linear-gradient(135deg, var(--kp-orange), #ff8846);
      border-radius:20px
    }
    .cta p{color:#fff;margin:0 0 14px;font-weight:700;font-size:20px}
    .cta a{
      display:inline-block;background:#fff;color:var(--kp-orange);
      padding:12px 22px;border-radius:999px;font-weight:800;text-decoration:none
    }
    footer.small{margin-top:24px;color:var(--kp-muted);font-size:12px;text-align:center}
      .article-meta {
            color: #ccc;
            font-size: 11px;
            margin-bottom: 10px;
        }

        strong {
            color: #F26D21;
        }

    
/* Desktop y tablet grandes: 2 arriba, 1 abajo */
@media (min-width: 768px) {
  .gallery > .span-7,
  .gallery > .span-5 {
    grid-column: span 6; /* mitad y mitad */
  }

  .gallery > .span-12 {
    grid-column: span 12; /* abajo completa */
  }
}

/* Móviles: todas iguales, una debajo de otra */
@media (max-width: 767px) {
  .gallery > * {
    grid-column: span 12;
  }

  .gallery img {
    aspect-ratio: 16 / 10; /* todas con misma altura */
  }
}

/* CTA */
.cta{
  margin:46px 0 0;
  text-align:center;
  padding:28px 18px;
  background:linear-gradient(135deg, var(--kp-orange), #ff8846);
  border-radius:20px;
}

.cta p{
  color:#fff;
  margin:0 0 14px;
  font-weight:700;
  font-size:20px;
}

.cta a{
  display:inline-block;
  background:#fff;
  color:var(--kp-orange);
  padding:12px 22px;
  border-radius:999px;
  font-weight:800;
  text-decoration:none;
}
.more-articles{
  margin:50px 0 0;
  text-align:center;
  padding:28px 18px;
  border:1px solid var(--stroke);
  border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
}

.more-articles p{
  font-size:20px;
  font-weight:700;
  margin-bottom:18px;
}

.more-buttons{
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}

.more-btn{
  display:inline-block;
  padding:12px 22px;
  border-radius:999px;
  font-weight:800;
  text-decoration:none;
  transition:.2s ease;
}

/* Botón principal */
.more-btn.primary{
  background:var(--kp-orange);
  color:#fff;
  box-shadow:0 8px 22px rgba(242,109,33,.35);
}

.more-btn.primary:hover{
  transform:translateY(-2px);
  background:#ff7c32;
}

/* Botón secundario */
.more-btn.secondary{
  background:#fff;
  color:var(--kp-orange);
}

.more-btn.secondary:hover{
  transform:translateY(-2px);
}