/* ==========================================================================
   KRAVITTAL — pages/interior.css
   Bloques compartidos por las tres páginas de público: Celebrities,
   Creadores de contenido y Ejecutivos y profesionales. Las tres siguen el
   mismo guion: banner, titular, banda de entrada, panel de claves, bloque
   destacado con cita, banda de cita y bloque final con imagen.
   Medidas tomadas del frame «Celebrities 20260916» (1920×4726).
   ========================================================================== */

/* --- 1. Anillo con glifo -------------------------------------------------- */
/*  Dos vectores superpuestos, igual que en Figma: el anillo de esquinas y
    el pictograma, prácticamente concéntricos.                              */

.ring {
  position: relative;
  display: block;
  flex: none;
  width: 65px;
  height: 65px;
  transition: transform .55s var(--kv-ease-out);
}

.ring img { position: absolute; inset: 0; width: 100%; height: 100%; }

.ring__glyph {
  inset: 1.9% 1.6% 1.6% 1.5%;
  width: 96.9%;
  height: 96.9%;
}


/* --- 2. Banda de entrada -------------------------------------------------- */
/*  Figma: banda de 1920×337 con titular y bajada centrados. El panel de
    claves la desborda por abajo, así que el relleno inferior es negativo
    en la práctica: se resuelve con el margen del propio panel.             */

.intro {
  background: var(--kv-bg-02);
  padding-block: clamp(2rem, 3.7vw, 71px) 0;
  text-align: center;
}

.intro__title { color: var(--kv-champagne-oscuro); }

.intro__text {
  max-width: 480px;
  margin: clamp(1.25rem, 1.5vw, 29px) auto 0;
}


/* --- 3. Panel de claves --------------------------------------------------- */
/*  Caja de 1591×529 montada sobre la banda anterior: entra 112 px en ella.
    Dentro, dos claves a la izquierda y una imagen de 618×436 a la derecha. */

.panel {
  position: relative;
  margin-top: clamp(2rem, 5.83vw, 112px);
  transform: translateY(clamp(-112px, -5.83vw, -32px));
  margin-bottom: clamp(-112px, -5.83vw, -32px);
  background: var(--kv-bg-03);
  padding: clamp(1.5rem, 3.28vw, 63px) clamp(1.25rem, 2.95vw, 47px)
           clamp(1.5rem, 3.28vw, 63px) clamp(1.25rem, 4vw, 64px);
}

.panel__grid {
  display: grid;
  grid-template-columns: minmax(0, 773fr) minmax(0, 618fr);
  gap: clamp(1.5rem, 4.64vw, 89px);
  align-items: start;
}

.panel__item {
  display: grid;
  grid-template-columns: 65px minmax(0, 1fr);
  gap: clamp(1rem, 1.35vw, 26px);
}

.panel__item + .panel__item { margin-top: clamp(2rem, 5.2vw, 100px); }

.panel__item h2 {
  font-size: var(--kv-fs-h3);
  line-height: 1.15;
  text-transform: uppercase;
  transition: color .4s var(--kv-ease);
}

.panel__item p { padding-top: 1.25rem; }

.panel__item:hover h2 { color: var(--kv-champagne-arena); }
.panel__item:hover .ring { transform: scale(1.06); }

.panel__media {
  aspect-ratio: 618 / 436;
  overflow: hidden;
}

.panel__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--kv-ease-out);
}

.panel__media:hover img { transform: scale(1.04); }


/* --- 4. Bloque destacado -------------------------------------------------- */
/*  Imagen a la izquierda con una caja champán montada encima y la cita
    alineada a la derecha dentro de ella; el texto largo, a la derecha.
    Mismo patrón que «Nuestra esencia» en el Home, con otro color de caja.  */

.destacado {
  display: grid;
  grid-template-columns: minmax(0, 654fr) minmax(0, 787fr);
  gap: clamp(2rem, 5.3vw, 102px);
  align-items: start;
}

.destacado__figure { position: relative; }

.destacado__img {
  width: 88.99%;                     /* 582 / 654                           */
  aspect-ratio: 582 / 325;
  overflow: hidden;
}

.destacado__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--kv-ease-out);
}

.destacado__figure:hover .destacado__img img { transform: scale(1.04); }

.destacado__quote {
  position: absolute;
  left: 16.06%;                      /* (280 − 175) / 654                   */
  top: 29.54%;                       /* (1794,94 − 1698,94) / 325           */
  width: 83.94%;                     /* 549 / 654                           */
  min-height: 229px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  padding: clamp(1rem, 2.19vw, 42px) clamp(1rem, 1.3vw, 25px)
           clamp(1rem, 2.19vw, 42px) clamp(1rem, 3.4vw, 65px);
  background: var(--kv-champagne-arena);
  color: var(--kv-arena-suave);
  text-align: right;
}

.destacado__body { padding-top: clamp(1rem, 3.5vw, 67px); }


/* --- 5. Banda de cita ----------------------------------------------------- */
/*  Figma: 1610×414 en champán, con un filete vertical de 230 px a la
    izquierda de la cita.                                                    */

.cita-banda {
  background: var(--cita-fondo, var(--kv-champagne-arena));
  color: var(--kv-arena-suave);
  padding: clamp(2rem, 4.69vw, 90px) clamp(1.5rem, 5.3vw, 102px)
           clamp(2rem, 4.69vw, 90px) clamp(1.5rem, 6.5vw, 125px);
}

.cita-banda__quote {
  position: relative;
  padding-left: clamp(1rem, 1.56vw, 30px);
  border-left: 1px solid currentColor;
  font-family: var(--kv-font);
  font-weight: var(--kv-peso-regular);
  font-style: italic;
  font-size: var(--kv-fs-cita);
  line-height: 1.2;
  max-width: 1062px;
}

.cita-banda--oscura { --cita-fondo: var(--kv-azul-petroleo); }

.cita-banda__note {
  max-width: 1051px;
  margin-top: clamp(1rem, 1.98vw, 38px);
  margin-left: clamp(1rem, 1.56vw, 30px);
  font-size: var(--kv-fs-h4);
  line-height: 1.2;
}


/* --- 6. Bloque final con imagen ------------------------------------------- */
/*  Anillo y texto a la izquierda, imagen de 805×364 a la derecha.          */

.remate {
  display: grid;
  grid-template-columns: minmax(0, 672fr) minmax(0, 805fr);
  gap: clamp(1.5rem, 6.6vw, 127px);
  align-items: end;
}

.remate__texto {
  display: grid;
  grid-template-columns: 65px minmax(0, 1fr);
  gap: clamp(1rem, 1.56vw, 30px);
  font-size: var(--kv-fs-h4);
  line-height: 1.2;
}

.remate__texto p + p { padding-top: 1.25em; }

.remate__media {
  aspect-ratio: 805 / 364;
  overflow: hidden;
}

.remate__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--kv-ease-out);
}

.remate__media:hover img { transform: scale(1.04); }


/* --- 6b. Ritmo vertical --------------------------------------------------- */
/*  Separaciones medidas entre bloques en el frame de Celebrities:
    panel→destacado 155, destacado→cita 155, cita→remate 191,
    remate→llamada 195. Se resuelven con margen, no apilando rellenos.    */

.bloque        { margin-top: clamp(2.5rem, 8.07vw, 155px); }
.bloque--ancho { margin-top: clamp(3rem, 9.95vw, 191px); }


/* --- 7. Responsive -------------------------------------------------------- */

@media (max-width: 1199px) {

  .panel {
    transform: none;
    margin-top: clamp(1.5rem, 3vw, 40px);
    margin-bottom: 0;
  }

  .panel__grid { grid-template-columns: minmax(0, 1fr); }
  .panel__media { order: -1; aspect-ratio: 16 / 9; }

  .destacado,
  .remate { grid-template-columns: minmax(0, 1fr); }

  .destacado__figure { padding-bottom: 0; }
  .destacado__img { width: 100%; }

  .destacado__quote {
    position: static;
    width: 100%;
    margin-top: -3rem;
    align-items: flex-start;
    text-align: left;
    padding: var(--kv-space-sm);
  }

  .remate__media { order: -1; }
}

@media (max-width: 767px) {

  .panel__item,
  .remate__texto { grid-template-columns: minmax(0, 1fr); gap: var(--kv-space-2xs); }

  .ring { width: 53px; height: 53px; }

  .cita-banda { padding-inline: var(--kv-space-xs); }
}


/* ==========================================================================
   Bloques propios de «Creadores de contenido»
   ========================================================================== */

/* --- 8. Entrada a dos columnas -------------------------------------------- */
/*  Figma: texto a la izquierda (741 px) e imagen de 739×416 a la derecha.  */

.entrada {
  display: grid;
  grid-template-columns: minmax(0, 741fr) minmax(0, 739fr);
  gap: clamp(2rem, 6.4vw, 123px);
  align-items: center;
}

.entrada__claim + .entrada__texto { padding-top: clamp(1rem, 1.98vw, 38px); }
.entrada__texto + .entrada__claim { padding-top: clamp(1.5rem, 2.9vw, 56px); }

.entrada__media {
  aspect-ratio: 739 / 416;
  overflow: hidden;
}

.entrada__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--kv-ease-out);
}

.entrada__media:hover img { transform: scale(1.04); }


/* --- 9. Rejilla de creadores ---------------------------------------------- */
/*  Figma: tres columnas de 492×566 con 64 px de calle. La primera ficha
    aparece en el diseño con la capa champán y los datos visibles: es el
    estado activo, que aquí se resuelve al pasar el cursor o al enfocar.   */

.creadores {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 64px;
}

.creador {
  position: relative;
  aspect-ratio: 492 / 566;
  overflow: hidden;
  background: var(--kv-bg-03);
}

.creador > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .8;
  transition: transform 1.4s var(--kv-ease-out), opacity .45s var(--kv-ease);
}

.creador__capa {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  padding: 19% var(--kv-space-xs) 0;   /* baja el grupo al punto del diseño */
  background: var(--kv-champagne-arena);
  color: var(--kv-white);
  text-align: center;
  opacity: 0;
  pointer-events: none;              /* oculta no intercepta clics          */
  transition: opacity .45s var(--kv-ease);
}

.creador:hover > img,
.creador:focus-within > img { transform: scale(1.04); opacity: 1; }

.creador:hover .creador__capa,
.creador:focus-within .creador__capa { opacity: .9; pointer-events: auto; }

.creador__nombre {
  font-size: var(--kv-fs-h3);
  line-height: 1.15;
  text-transform: uppercase;
}

.creador__tipo {
  font-size: var(--kv-fs-base);
  line-height: 1.25;
}

.creador__redes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 1.15vw, 22px);
  margin-top: clamp(1rem, 1.85vw, 35px);
}

.creador__red {
  display: block;
  width: 23.5px;
  height: 23.5px;
  color: inherit;
  transition: opacity var(--kv-dur) var(--kv-ease),
              transform var(--kv-dur) var(--kv-ease-out);
}

.creador__red svg { width: 100%; height: 100%; }

.creador__red:hover,
.creador__red:focus-visible { opacity: .7; transform: translateY(-2px); }

@media (max-width: 1199px) {
  .entrada { grid-template-columns: minmax(0, 1fr); }
  .entrada__media { order: -1; }
  .creadores { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }

  /* Sin ratón la capa no se puede descubrir: se deja visible */
  .creador__capa { opacity: .9; pointer-events: auto; }
  .creador img { opacity: 1; }
}

@media (max-width: 767px) {
  .creadores { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}


/* ==========================================================================
   Bloques propios de «Ejecutivos y profesionales»
   ========================================================================== */

/* --- 10. Entradilla centrada ---------------------------------------------- */

.lead {
  max-width: 1178px;
  margin-inline: auto;
  text-align: center;
}

.lead__claim { color: var(--kv-champagne-arena); text-transform: uppercase; }

.lead__texto {
  max-width: 1072px;
  margin: clamp(1rem, 1.25vw, 24px) auto 0;
}

.lead__texto p + p { padding-top: 1.25rem; }


/* --- 11. Franja de imagen a sangre ---------------------------------------- */

.franja {
  overflow: hidden;
  min-height: min(540px, 28.13vw);
}

.franja img {
  width: 100%;
  height: min(540px, 28.13vw);
  object-fit: cover;
  opacity: .9;
  transition: transform 1.4s var(--kv-ease-out);
}

.franja:hover img { transform: scale(1.03); }


/* --- 12. Bloque PBP® ------------------------------------------------------ */
/*  Banda champán de 1920×598 con una caja Background 03 de 1591×521 que la
    desborda por abajo; dentro, texto a la izquierda e imagen a la derecha. */

.pbp {
  background: var(--kv-champagne-arena);
  color: var(--kv-arena-suave);
  padding-block: clamp(2rem, 3.23vw, 62px) 0;
  text-align: center;
}

.pbp__sub { margin-top: clamp(0.75rem, 0.94vw, 18px); }

.pbp__box {
  margin-top: clamp(1.5rem, 3.75vw, 72px);
  transform: translateY(clamp(-103px, -5.36vw, -32px));
  margin-bottom: clamp(-103px, -5.36vw, -32px);
  background: var(--kv-bg-03);
  color: var(--kv-texto);
  padding: clamp(1.5rem, 4.27vw, 82px) clamp(1.25rem, 2.03vw, 39px)
           clamp(1.5rem, 3.6vw, 69px) clamp(1.25rem, 3.54vw, 68px);
  text-align: left;
}

.pbp__grid {
  display: grid;
  grid-template-columns: minmax(0, 638fr) minmax(0, 733fr);
  gap: clamp(1.5rem, 5.89vw, 113px);
  align-items: start;
}

.pbp__texto {
  display: grid;
  grid-template-columns: 65px minmax(0, 1fr);
  gap: clamp(1rem, 1.35vw, 26px);
}

.pbp__texto p + p { padding-top: 1.25rem; }

.pbp__cierre {
  margin-top: clamp(1rem, 1.98vw, 38px);
  color: var(--kv-champagne-arena);
  font-size: var(--kv-fs-lg);
  line-height: 1.15;
}

.pbp__media {
  aspect-ratio: 733 / 432;
  overflow: hidden;
}

.pbp__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--kv-ease-out);
}

.pbp__media:hover img { transform: scale(1.04); }

@media (max-width: 1199px) {
  .pbp__box { transform: none; margin-top: clamp(1.5rem, 3vw, 40px); margin-bottom: 0; }
  .pbp__grid { grid-template-columns: minmax(0, 1fr); }
  .pbp__media { order: -1; }
  .franja img { height: auto; aspect-ratio: 16 / 7; }
}

@media (max-width: 767px) {
  .pbp__texto { grid-template-columns: minmax(0, 1fr); gap: var(--kv-space-2xs); }
}