/* ─── Sistema de secciones — traducción de src/index.css:42-166 ───────── */

.kik-section,
.kik-section-alt,
.kik-section-dark {
  padding: clamp(48px, 7vw, 88px) clamp(20px, 6vw, 72px);
}
.kik-section-alt  { background: var(--wp--preset--color--gris-fondo); }
.kik-section-dark { background: var(--wp--preset--color--purple); }

/* 2 columnas — colapsa a 1 en mobile */
.kik-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}

/* Grid de 4 tarjetas */
.kik-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}

/* Grid de contacto — más angosto */
.kik-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  max-width: 960px;
  margin: 0 auto;
}

/* Grid de tarjetas del hero */
.kik-hero-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
  max-width: 680px;
}

/* Título de sección */
.kik-h2 {
  font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 900;
  font-size: clamp(26px, 3.5vw, 44px);
  color: var(--wp--preset--color--purple);
  margin: 0 0 16px 0;
  line-height: 1.15;
}
.kik-h2-white { color: var(--wp--preset--color--blanco); }
.kik-h2-upper { text-transform: uppercase; }

.kik-body {
  font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 500;
  font-size: 15px;
  color: var(--wp--preset--color--texto-suave);
  line-height: 1.7;
  margin: 0 0 12px 0;
}

/* Patrón diagonal de los fondos morados (Empresas.tsx:55, Productores.tsx:68).
   NOTA DE FIDELIDAD: las dos páginas del spec usan valores levemente distintos
   para este patrón (Productores: opacity 0.05, backgroundSize 20px 20px;
   Empresas: opacity 0.06, backgroundSize 22px 22px). El plan define una sola
   clase compartida; acá se usan los valores de Empresas.tsx tal como los trae
   el plan. Ver reporte de esta task para el detalle — a resolver en Task 7/8
   si se quiere fidelidad exacta por página. */
.kik-diagonal { position: relative; overflow: hidden; }
.kik-diagonal > * { position: relative; z-index: 1; }
.kik-diagonal::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.06;
  background-image: repeating-linear-gradient(45deg, #FDB913 0, #FDB913 1px, transparent 0, transparent 50%);
  background-size: 22px 22px;
  z-index: 0;
}

/* ─── Breakpoints ─────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .kik-grid { grid-template-columns: 1fr; gap: 32px; }

  /* Imágenes que aparecen segundas en el DOM pero deben verse primero en mobile */
  .kik-grid .kik-img-col { order: -1; }

  .kik-grid-4 { grid-template-columns: 1fr 1fr; gap: 12px; }

  .kik-contact-grid { grid-template-columns: 1fr; gap: 32px; }

  .kik-hero-cards { grid-template-columns: 1fr; max-width: 320px; }

  /* Sección home split: apila verticalmente */
  .kik-home-split { grid-template-columns: 1fr !important; min-height: auto !important; }
  /* Sin tope de alto: con la foto circular, un max-height de 340px contra
     un círculo de 310px más 48px de relleno recortaba el círculo arriba y
     abajo. Ahora el panel se ajusta a la foto, y la foto al ancho. */
  .kik-home-split .kik-home-img { min-height: 0; max-height: none; padding: 28px 24px; }
  .kik-home-split .kik-home-img img { max-width: min(380px, 75vw); }

  /* Portada splash en mobile: chico y chica acompañan a sus respectivas tarjetas */
  .kik-splash-body {
    position: relative !important;
    overflow: hidden !important;
  }
  .kik-splash-center {
    justify-content: flex-start !important;
    padding-top: 18px !important;
    padding-bottom: 24px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    position: relative !important;
    z-index: 1 !important;
  }
  .kik-hero-cards {
    grid-template-columns: 1fr;
    max-width: 326px !important;
    width: 100% !important;
    gap: 22px !important;
    position: relative !important;
  }
  .kik-cta-card {
    position: relative !important;
    z-index: 1 !important;
    padding: 18px 24px 16px !important;
  }
  .kik-cta-sub {
    line-height: 1.45 !important;
  }
  .kik-person-photo {
    display: block !important;
    position: absolute !important;
    pointer-events: none !important;
    z-index: 3 !important;
  }
  /* Chica en mobile: asoma por la izquierda de la tarjeta SOY FAN */
  .kik-person-photo:first-child {
    left: calc(50% - 163px - 82px) !important;
    top: 2px !important;
    width: 142px !important;
    height: 240px !important;
  }
  .kik-person-photo:first-child .wp-block-image {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
  }
  .kik-person-photo:first-child img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: bottom left !important;
    display: block !important;
  }
  /* Chico en mobile: asoma por la derecha de la tarjeta SOY PRODUCTOR */
  .kik-person-photo:last-child {
    right: calc(50% - 163px - 62px) !important;
    top: 242px !important;
    width: 146px !important;
    height: 245px !important;
  }
  .kik-person-photo:last-child .wp-block-image {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
  }
  .kik-person-photo:last-child img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: bottom right !important;
    display: block !important;
  }
  /* Separador y bloque empresa en mobile: se despega verticalmente de la imagen */
  .kik-splash-divider {
    margin-top: 50px !important;
  }
}

@media (max-width: 480px) {
  .kik-grid-4 { grid-template-columns: 1fr; }
  .kik-section, .kik-section-alt, .kik-section-dark { padding: 40px 16px; }
}

/* ─── Header (Task 6) ────────────────────────────────────────────────── */

.kik-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(104, 45, 135, 0.12);
}
.kik-header .wp-block-navigation a {
  font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 600;
  color: var(--wp--preset--color--purple);
  text-decoration: none;
}
.kik-header .wp-block-navigation a:hover { opacity: 0.7; }

/* Deja sitio al header fijo (equivale a paddingTop:56 del spec) */
/* 32px de logo + 12+12 de padding + 1px de borde = 57px */
.kik-con-header-fijo { padding-top: 57px; }

/* ─── Task 7: patterns base reutilizados ────────────────────────────── */

/* Eyebrow — Productores.tsx:36-38 (Eyebrow helper) */
.kik-eyebrow {
  font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wp--preset--color--purple);
  opacity: 0.5;
  margin: 0 0 6px 0;
}
.kik-eyebrow-light { color: var(--wp--preset--color--yellow); opacity: 1; }

/* Imagen redondeada con acento amarillo — Productores.tsx:40-45 (RoundImg helper) */
.kik-round-img { position: relative; }
.kik-round-img::before {
  content: '';
  position: absolute;
  top: -10px; right: -10px;
  width: 100%; height: 100%;
  border-radius: 24px;
  background: var(--wp--preset--color--yellow);
  opacity: 0.2;
}
.kik-round-img .wp-block-image { position: relative; margin: 0; }
.kik-round-img img {
  border-radius: 24px;
  width: 100%;
  object-fit: cover;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.13);
  display: block;
}

/* Envoltorio de ancho 1100px reutilizado por grid-4-tarjetas y grid-4-numeradas
   (Productores.tsx:114, Empresas.tsx:108 — div style maxWidth:1100 margin:0 auto) */
.kik-wrap { max-width: 1100px; margin: 0 auto; }

/* Ajustes puntuales de espaciado de encabezado de sección
   (Productores.tsx:116-117, Empresas.tsx:110-111) */
.kik-h2-tight { margin-bottom: 8px; }
.kik-body-lead { margin-bottom: 32px; max-width: 560px; }

/* Tarjeta con imagen y overlay de número/título — Productores.tsx:118-137 */
.kik-card {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  background: #fff;
}
.kik-card-media { position: relative; }
.kik-card-media .kik-card-img { margin: 0; line-height: 0; }
.kik-card-media .kik-card-img img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.kik-card-overlay {
  position: absolute;
  inset: 0;
  align-items: flex-end;
  padding: 12px 16px;
  background: linear-gradient(to top, rgba(104, 45, 135, 0.92) 0%, transparent 55%);
}
.kik-card-title {
  color: #fff;
  font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 900;
  font-size: 20px;
  margin: 0;
}
.kik-card-num {
  color: rgba(255, 255, 255, 0.45);
  font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 800;
  font-size: 13px;
  margin: 0;
}
.kik-card-desc {
  padding: 14px 16px;
  margin: 0;
  font-family: var(--wp--preset--font-family--montserrat);
  font-size: 13px;
  color: #555;
  line-height: 1.6;
}

/* Tarjeta sin imagen, numerada — Empresas.tsx:112-127 */
.kik-card-plain {
  border-radius: 16px;
  padding: 22px 20px;
  background: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kik-card-plain-num {
  font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 900;
  font-size: 22px;
  color: var(--wp--preset--color--yellow);
  line-height: 1;
  margin: 0;
}
.kik-card-plain-title {
  font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 800;
  font-size: 15px;
  color: var(--wp--preset--color--purple);
  margin: 0;
  line-height: 1.25;
}
.kik-card-plain-desc {
  font-family: var(--wp--preset--font-family--montserrat);
  font-size: 13px;
  color: #555;
  line-height: 1.6;
  margin: 0;
}

/* Pasos numerados con círculo morado — Productores.tsx:184-199 */
.kik-step { gap: 16px; align-items: flex-start; }
.kik-step-num {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--wp--preset--color--purple);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 900;
  font-size: 14px;
  color: var(--wp--preset--color--yellow);
  margin: 0;
  text-align: center;
}
.kik-step-title {
  font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 800;
  font-size: 14px;
  color: var(--wp--preset--color--purple);
  margin: 0 0 3px 0;
}
.kik-step-desc {
  font-family: var(--wp--preset--font-family--montserrat);
  font-size: 13px;
  color: #555;
  line-height: 1.6;
  margin: 0;
}
.kik-step-highlight {
  background: var(--wp--preset--color--yellow);
  border-radius: 14px;
  padding: 16px 20px;
  margin-top: 4px;
}
.kik-step-highlight p {
  font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 900;
  font-size: 16px;
  color: var(--wp--preset--color--purple);
  margin: 0;
  line-height: 1.4;
}

/* Imagen simple centrada, sin acento redondo — Productores.tsx:213-216 */
.kik-plain-img-el {
  margin: 0;
}
.kik-plain-img-el img {
  max-width: 360px;
  width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.18));
  display: block;
}

/* Checklist con ícono de tilde — Productores.tsx:47-55, 222-234 */
.kik-check-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.kik-check-list > * {
  margin: 0 !important;
}
.kik-check-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin: 0 !important;
}
.kik-check-icon {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
  display: block !important;
}
.kik-check-text {
  font-family: var(--wp--preset--font-family--montserrat) !important;
  font-size: 14px !important;
  color: #444 !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

/* Cita con borde morado — Productores.tsx:236-240 */
.kik-quote {
  border: 2px solid var(--wp--preset--color--purple);
  border-radius: 14px;
  padding: 14px 18px;
  margin: 8px 0 0;
}
.kik-quote-text {
  font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 700;
  font-size: 13px;
  color: var(--wp--preset--color--purple);
  margin: 0;
  line-height: 1.5;
  font-style: italic;
}

/* Contacto sobre fondo oscuro — Productores.tsx:320-350 */
.kik-contact-mark {
  width: 70px; height: 70px;
  border-radius: 50%;
  background: var(--wp--preset--color--yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 900;
  font-size: 28px;
  color: var(--wp--preset--color--purple);
  margin: 0;
  overflow: hidden;
}
figure.kik-contact-mark,
.kik-contact-mark.wp-block-image,
.wp-block-image.kik-contact-mark {
  width: 70px !important;
  height: 70px !important;
  max-width: 70px !important;
  max-height: 70px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  flex-shrink: 0 !important;
  aspect-ratio: 1 / 1 !important;
  background: transparent !important;
}
figure.kik-contact-mark img,
.kik-contact-mark.wp-block-image img,
.wp-block-image.kik-contact-mark img,
.kik-contact-mark img {
  width: 70px !important;
  height: 70px !important;
  max-width: 70px !important;
  max-height: 70px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
}
.kik-contact-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
.kik-contact-list > * {
  margin: 0 !important;
}
.kik-contact-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  color: rgba(255, 255, 255, 0.85);
}
.kik-contact-item svg {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  flex-shrink: 0 !important;
  display: block !important;
}
.kik-contact-item a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
  display: inline-block;
}
.kik-pill-btn-wrap { margin: 4px 0 0; }
.kik-pill-btn {
  display: inline-block;
  background: var(--wp--preset--color--yellow);
  color: var(--wp--preset--color--purple);
  border-radius: 9999px;
  padding: 11px 26px;
  font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 800;
  font-size: 13px;
  text-decoration: none;
}
.kik-form-hueco {
  padding: clamp(20px, 3vw, 28px);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.1);
}
.kik-form-hueco-aviso {
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--wp--preset--font-family--montserrat);
  font-style: italic;
  margin: 0;
}

/* ─── Task 8: patterns específicos (heroes, modalidades, equipo, CTA, FAQ) ─── */

/* CORRECCIÓN de fidelidad: Productores.tsx:68 usa un patrón diagonal más sutil
   y más denso que el de Empresas.tsx:55 (que ya vive en .kik-diagonal, arriba).
   Esta variante se agrega para hero-split (Productores) sin tocar .kik-diagonal
   (que sigue sirviendo a hero-centrado, de Empresas). */
.kik-diagonal-sutil::before {
  opacity: 0.05;
  background-size: 20px 20px;
}

/* Hero split — Home Productores (Productores.tsx:65-88).
   Base del grid, no definida en la Task 4 pese a estar en su lista de interfaces. */
.kik-home-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 620px;
}
.kik-home-img {
  background: var(--wp--preset--color--purple);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 40px;
  position: relative;
  overflow: hidden;
}
.kik-home-img .wp-block-image { margin: 0; }
/* Redonda y grande, como en el Canva. object-fit:cover porque el recorte
   circular necesita llenar el cuadro; con contain quedaban franjas. */
.kik-home-img img {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
  display: block;
}
.kik-home-copy {
  background: var(--wp--preset--color--yellow);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(40px, 5vw, 64px) clamp(28px, 4vw, 56px);
  gap: 14px;
}
/* Logo de KIK en el Hero: equilibrado con el titular y el panel amarillo. */
.kik-home-logo { width: clamp(200px, 24vw, 300px); height: auto; display: block; margin: 0 0 4px 0; }
/* Script de pincel. Se utiliza Kaushan Script de Google Fonts (auto-hospedada). */
.kik-home-tagline {
  font-family: var(--wp--preset--font-family--kaushan-script), "Kaushan Script", cursive;
  font-style: normal;
  font-weight: 400;
  font-size: clamp(30px, 4vw, 52px);
  color: var(--wp--preset--color--purple);
  margin: 2px 0 6px 0;
  line-height: 1.15;
}
.kik-home-body {
  font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 500;
  font-size: 15px;
  /* Violeta de marca, no el #3d1a52 que leía como negro: en el Canva el
     cuerpo sobre amarillo es morado. Sobre #FDB913 da 5.24:1, pasa AA. */
  color: var(--wp--preset--color--purple);
  line-height: 1.7;
  margin: 0;
}
.kik-home-footnote {
  font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 700;
  font-size: 13px;
  color: var(--wp--preset--color--purple);
  margin: 4px 0 0;
  /* Sin opacity: al 70% sobre el amarillo daba 3.18, por debajo del 4.5
     que pide AA para 13px. A opacidad plena da 5.24. */
}

/* Chips de servicio — Productores.tsx:80-84, Empresas.tsx:68-72 */
.kik-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.kik-chips-center { justify-content: center; }
.kik-chip {
  /* Velo blanco y no morado: sobre el amarillo, un tinte morado oscurece
     la píldora y el texto morado encima caía a 4.40. En blanco sube a 6.49. */
  background: rgba(255, 255, 255, 0.45);
  color: var(--wp--preset--color--purple);
  font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 700;
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 9999px;
  margin: 0;
}
.kik-chip-onpurple {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 700;
  font-size: 12px;
  padding: 5px 14px;
  border-radius: 9999px;
  margin: 0;
}

/* Hero centrado — Home Empresas (Empresas.tsx:62-85) */
.kik-hero-centrado {
  background: #929498;
  padding: clamp(56px, 8vw, 96px) clamp(20px, 6vw, 72px);
  text-align: center;
}
.kik-hero-centrado-inner {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.kik-hero-badge {
  background: var(--wp--preset--color--yellow);
  color: var(--wp--preset--color--purple);
  font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 16px;
  border-radius: 9999px;
  display: inline-block;
  margin: 0;
}
.kik-hero-logo { width: clamp(200px, 26vw, 280px); height: auto; display: block; margin: 0; }
.kik-hero-subtag {
  font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin: -4px 0 0;
}
.kik-hero-h1 {
  font-family: var(--wp--preset--font-family--montserrat);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(22px, 3vw, 34px);
  color: var(--wp--preset--color--yellow);
  margin: 0;
  line-height: 1.2;
}
.kik-hero-body {
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 500;
  font-size: clamp(14px, 2vw, 17px);
  line-height: 1.7;
  margin: 0;
  max-width: 560px;
}
.kik-hero-cta-wrap { margin: 0; }
.kik-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--wp--preset--color--yellow);
  color: var(--wp--preset--color--purple);
  border-radius: 9999px;
  padding: 13px 30px;
  font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
  margin-top: 6px;
}

/* Modalidades de trabajo — Productores.tsx:143-174 */
.kik-modalidad { gap: 14px; align-items: flex-start; }
.kik-modalidad-circle {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 900;
  font-size: 14px;
  color: var(--wp--preset--color--purple);
  margin: 0;
  text-align: center;
}
.kik-modalidad-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.kik-modalidad-title {
  font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 800;
  font-size: 15px;
  color: var(--wp--preset--color--purple);
}
.kik-badge {
  background: var(--wp--preset--color--yellow);
  color: var(--wp--preset--color--purple);
  font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 700;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
}
.kik-modalidad-list { padding-left: 18px; margin: 0; }
.kik-modalidad-list li {
  font-family: var(--wp--preset--font-family--montserrat);
  font-size: 13px;
  color: #555;
  line-height: 1.65;
  margin-bottom: 3px;
}

/* Equipo — Caro & Fabi (Productores.tsx:246-275) */
.kik-team-photo-col { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.kik-team-photo-wrap { position: relative; display: inline-block; }
.kik-team-photo-wrap::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 4px solid var(--wp--preset--color--yellow);
  opacity: 0.6;
}
.kik-team-photo-wrap .wp-block-image { position: relative; margin: 0; }
.kik-team-photo-wrap .wp-block-image img {
  width: 200px; height: 200px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 4px solid var(--wp--preset--color--yellow);
  box-shadow: 0 8px 32px rgba(104, 45, 135, 0.18);
}
.kik-team-name {
  font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 900;
  font-size: 18px;
  color: var(--wp--preset--color--purple);
  margin: 0 0 2px 0;
}
.kik-team-role {
  font-family: var(--wp--preset--font-family--montserrat);
  font-size: 13px;
  color: #6c6c6c;
  margin: 0;
}
.kik-team-highlight {
  background: rgba(104, 45, 135, 0.06);
  border-radius: 12px;
  padding: 14px 18px;
}
.kik-team-highlight p {
  font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 700;
  font-size: 14px;
  color: var(--wp--preset--color--purple);
  margin: 0;
  line-height: 1.5;
}

/* CTA morado — Tu merchandising (Productores.tsx:277-304) */
.kik-cta-h2 {
  font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 900;
  font-size: clamp(22px, 3vw, 36px);
  color: #fff;
  margin: 0;
  line-height: 1.2;
}
.kik-cta-copy {
  font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 500;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.7;
  margin: 0;
}
.kik-hl-yellow { color: var(--wp--preset--color--yellow); }
.kik-cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.kik-btn-yellow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--wp--preset--color--yellow);
  color: var(--wp--preset--color--purple);
  border-radius: 9999px;
  padding: 12px 28px;
  font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
}
.kik-btn-outline-white {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 9999px;
  padding: 12px 28px;
  font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}

/* FAQ — acordeón nativo Details (Productores.tsx:306-318, 393-424) */
.kik-faq {
  border: 2px solid rgba(104, 45, 135, 0.14);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  transition: border-color 0.2s;
}
.kik-faq[open] { border-color: var(--wp--preset--color--purple); }
.kik-faq summary {
  padding: 14px 18px;
  font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 700;
  font-size: 14px;
  color: var(--wp--preset--color--purple);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.kik-faq summary::-webkit-details-marker { display: none; }
.kik-faq summary::after {
  content: '+';
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
  transition: transform 0.2s;
  flex-shrink: 0;
}
.kik-faq[open] summary { background: rgba(104, 45, 135, 0.05); }
.kik-faq[open] summary::after { transform: rotate(45deg); }
.kik-faq > p { padding: 2px 18px 14px; margin: 0; font-size: 13px; color: #555; line-height: 1.65; }

/* ─── Task 9: clases específicas de la página Empresas ─────────────────
   Ninguna reemplaza ni reestila las clases de arriba (compartidas con
   Productores) — son variantes puntuales que solo usa Empresas. */

/* Botón verde de WhatsApp — Empresas.tsx:97-100 */
.kik-wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #25D366;
  color: #fff;
  border-radius: 9999px;
  padding: 13px 28px;
  font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
  width: fit-content;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.3);
  margin-top: 4px;
}
.kik-wa-btn svg { flex-shrink: 0; }

/* Imagen circular con borde amarillo simple — Empresas.tsx:166-169.
   Distinta de .kik-team-photo-wrap (doble borde, usada por equipo.php en Productores). */
.kik-round-yellow { display: flex; justify-content: center; }
.kik-round-yellow .wp-block-image {
  margin: 0;
  width: min(320px, 90%);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--wp--preset--color--yellow);
  box-shadow: 0 16px 48px rgba(104, 45, 135, 0.2);
}
.kik-round-yellow .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Párrafo introductorio de la sección de contacto — Empresas.tsx:206-208
   (Productores no tiene este párrafo en la sección de contacto) */
.kik-contact-intro {
  font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
}

/* Variante con ícono de .kik-pill-btn — Empresas.tsx:223-226 ("Hablemos por WhatsApp") */
.kik-pill-btn-icon { display: inline-flex; align-items: center; gap: 8px; }

/* ─── Corrección del header (medido contra la referencia) ─────────────── */
/* El header medía 88px contra los 50px del diseño, y el contenido quedaba
   tapado porque .kik-con-header-fijo reserva 56px. El logo pasa a altura
   fija para que el header sea determinista: 32 + 12 + 12 = 56px exactos. */
.kik-header .kik-logo,
.kik-header .kik-logo img {
  display: block;
  margin: 0;
  height: 32px;
  width: auto;
}

/* Los estilos propios del bloque Navigation ganaban por especificidad y
   pintaban los enlaces con el color de texto base en vez del morado. */
.kik-header .wp-block-navigation .wp-block-navigation-item__content,
.kik-header .wp-block-navigation a:not(.wp-block-navigation-submenu__toggle) {
  color: var(--wp--preset--color--purple);
  font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 600;
  text-decoration: none;
}

/* ─── Task 11: Front page — el splash (Hero.tsx) ───────────────────────── */

.kik-splash {
  /* Blanco, no amarillo: el cliente pidió que la marca de agua de los shows
     vaya siempre sobre blanco, como en el Canva. El amarillo sube a la banda
     del logo (parts/header-minimo.html). */
  background: var(--wp--preset--color--blanco);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* Franja del tagline — Hero.tsx:37-41 */
.kik-splash-tagline {
  background: var(--wp--preset--color--purple);
  padding: 10px 24px;
  text-align: center;
  position: relative;
  z-index: 2;
}
.kik-splash-tagline p,
.kik-splash-tagline h1 {
  color: #fff;
  font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 500;
  font-size: 15px;
  margin: 0;
  letter-spacing: 0.01em;
}

/* Cuerpo: fotos laterales + contenido central — Hero.tsx:44-112 */
.kik-splash-body {
  flex: 1;
  position: relative;
  display: flex;
  align-items: stretch;
  z-index: 2;
}
/* Watermark de shows de Broadway — Hero.tsx:24-28.
   Apunta al asset gris del tema y ya no a la variable que inyectaba
   wp_head(): esa traia el archivo original, de trazo claro, que sobre el
   amarillo no tomaba cuerpo. */
.kik-splash-body::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../img/watermark-shows-gris.webp');
  background-size: cover;
  background-position: center;
  /* Trazo en gris y multiply, no el asset claro: sobre el amarillo el
     gris lo apaga y los títulos toman cuerpo, en vez de solo aclararlo.
     10% es el techo — a 14% el texto morado cae a 4.42 y pierde AA. */
  /* Sobre blanco, el gris con multiply da el mismo tono lavanda-gris del
     Canva (#edebf0). Al 10%, que era lo justo sobre el amarillo, acá no se veía. */
  opacity: 0.15;
  mix-blend-mode: multiply;
  pointer-events: none;
}
/* Notas musicales abajo a la derecha — Hero.tsx:31-34 */
.kik-splash-body::after {
  content: '';
  position: absolute;
  bottom: -20px; right: -10px;
  width: 240px; height: 240px;
  background-image: var(--kik-notas);
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.07;
  transform: rotate(10deg);
  pointer-events: none;
}

/* Fotos laterales — Hero.tsx:47-49, 108-110. Se ocultan bajo 768px
   (regla ya existente en el bloque de breakpoints, arriba). */
.kik-person-photo {
  /* En desktop ocupan más espacio para asemejarse al Canva original,
     aprovechando toda la altura de la franja y con mayor ancho proporcional. */
  width: clamp(240px, 26vw, 440px);
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.kik-person-photo .wp-block-image {
  margin: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
}
.kik-person-photo img {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: bottom;
  display: block;
}
.kik-person-photo:first-child img {
  object-position: bottom left;
}
.kik-person-photo:last-child img {
  object-position: bottom right;
}

/* Contenido central — Hero.tsx:52-105 */
.kik-splash-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* En vh, no en vw: lo que aprieta a la portada es la altura de pantalla,
     no el ancho. Así el splash entra en un portátil de 768px de alto sin
     achicar el logo ni las fotos, que es lo que el cliente pidió agrandar. */
  padding: clamp(14px, 3.2vh, 48px) 20px;
  gap: clamp(10px, 2vh, 20px);
  position: relative;
  z-index: 1;
}

/* Eyebrow "Elegí tu camino" — Hero.tsx:55-57 (valores propios, distintos
   de .kik-eyebrow: weight 800, letter-spacing 0.2em, opacity 0.6) */
.kik-splash-eyebrow {
  font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wp--preset--color--purple);
  margin: 0;
  opacity: 0.6;
}

/* Tarjetas CTA — Hero.tsx:120-156 (componente CTACard) */
.kik-cta-card {
  background: #fff;
  border-radius: 20px;
  border: 2px solid rgba(104, 45, 135, 0.1);
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 8px 32px rgba(104, 45, 135, 0.1);
  height: 100%;
  box-sizing: border-box;
}
/* Línea de acento amarilla arriba — Hero.tsx:139 */
.kik-cta-card::before {
  content: '';
  width: 36px; height: 3px;
  border-radius: 2px;
  background: var(--wp--preset--color--yellow);
  margin-bottom: 14px;
}
.kik-cta-title {
  font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 900;
  font-size: clamp(20px, 2.2vw, 28px);
  color: var(--wp--preset--color--purple);
  margin: 0 0 10px 0;
  line-height: 1.15;
}
/* El subtítulo crece para que los botones queden alineados — Hero.tsx:142 */
.kik-cta-sub {
  font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 500;
  font-size: 13px;
  color: #666;
  margin: 0;
  line-height: 1.6;
  flex: 1;
}
.kik-cta-btn {
  margin-top: 18px;
  background: var(--wp--preset--color--yellow);
  color: var(--wp--preset--color--purple);
  border: 2.5px solid var(--wp--preset--color--purple);
  border-radius: 9999px;
  padding: 10px 28px;
  font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-decoration: none;
  flex-shrink: 0;
  display: inline-block;
}

/* Separador "o también" — Hero.tsx:76-80 */
.kik-splash-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 540px;
}
.kik-splash-divider-line { flex: 1; height: 1px; background: rgba(104, 45, 135, 0.18); }
.kik-splash-divider-text {
  font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 700;
  font-size: 11px;
  color: var(--wp--preset--color--purple);
  opacity: 0.45;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin: 0;
  white-space: nowrap;
}

/* Tercer CTA — empresas — Hero.tsx:83-103 */
.kik-splash-third {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: rgba(104, 45, 135, 0.00);
  border-radius: 16px;
  padding: 16px 28px;
  max-width: 480px;
  width: 100%;
  box-sizing: border-box;
}
.kik-splash-third-text {
  font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 700;
  font-size: 13px;
  color: var(--wp--preset--color--purple);
  text-align: center;
  margin: 0;
  line-height: 1.5;
}
.kik-splash-third-btn {
  background: var(--wp--preset--color--yellow);
  color: var(--wp--preset--color--purple);
  border: none;
  border-radius: 9999px;
  padding: 11px 30px;
  font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 16px rgba(104, 45, 135, 0.18);
  text-decoration: none;
  display: inline-block;
}

/* ─── Franja de estadísticas (Productores.tsx:101-108) ────────────────── */
.kik-stats { display: flex; gap: 24px; margin-top: 8px; flex-wrap: wrap; }
.kik-stat  { display: flex; flex-direction: column; gap: 0; }
.kik-stat-n {
  font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 900;
  font-size: 28px;
  color: var(--wp--preset--color--purple);
  line-height: 1;
  margin: 0;
}
.kik-stat-l {
  font-family: var(--wp--preset--font-family--montserrat);
  font-size: 12px;
  color: #6c6c6c;
  margin: 2px 0 0 0;
}

/* ─── Neutralizar el blockGap de WordPress dentro de los grids ─────────── */
/* WordPress aplica margin-top al segundo hijo en adelante de todo grupo
   is-layout-flow. Dentro de un grid eso empuja las columnas 2..n hacia
   abajo y deja la primera desalineada — se veía en "Qué hacemos", donde
   la tarjeta 1 quedaba 24px más arriba que las otras tres.
   Los selectores de WordPress usan :where(), de especificidad cero, así
   que una clase simple alcanza para ganarles. */
.kik-grid > *,
.kik-grid-4 > *,
.kik-contact-grid > *,
.kik-hero-cards > *,
.kik-splash > *,
.kik-splash-body > *,
.kik-splash-center > *,
.kik-cta-card > *,
.kik-splash-divider > *,
.kik-splash-third > *,
.kik-home-split > *,
.kik-stats > *,
.kik-card > *,
.kik-step > * {
  margin-top: 0;
  margin-bottom: 0;
}

/* Y que las tarjetas llenen la altura de su celda, para que los pies
   queden parejos aunque los textos tengan distinto largo. */
.kik-grid-4 > * { height: 100%; }

/* ─── FAQ: las preguntas ocupan el ancho de la columna ────────────────── */
/* El grupo contenedor es flex vertical con align-items:flex-start, que
   encoge cada <details> al ancho de su texto y deja la lista dentada.
   El diseño las muestra todas del mismo ancho. */
.kik-faq { width: 100%; box-sizing: border-box; }


/* Los botones del splash van dentro de un párrafo editable, para que el
   cliente pueda cambiarles el texto. Como .kik-cta-card y .kik-splash-third
   son flex, las propiedades de ítem flexible tienen que vivir en ese
   envoltorio, no en el <a>. */
.kik-cta-btn-wrap { margin: 18px 0 0 0; flex-shrink: 0; }
.kik-splash-third-wrap { margin: 0; }

/* ─── La portada ocupa exactamente una pantalla ────────────────────────── */
/* En Hero.tsx el contenedor de 100vh envuelve la barra del logo, el cuerpo
   amarillo Y el footer. Acá esos tres son hermanos dentro de .wp-site-blocks,
   así que el 100vh del splash se sumaba a las alturas de header y footer y
   la página quedaba 40% más alta que el diseño.
   Se invierte: el contenedor de la página es el que mide una pantalla, y el
   cuerpo amarillo crece para llenar lo que sobre. */
body.home .wp-site-blocks {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.wp-site-blocks > * {
  /* WordPress separa los bloques de nivel superior con margin-top. Eso deja
     una banda blanca de 24px entre el contenido y el footer en todas las
     paginas, y en la portada tambien entre la barra morada del logo y la
     franja del tagline. La regla aplica a todo el sitio, no solo a la home. */
  margin-top: 0;
  margin-bottom: 0;
}
body.home .wp-site-blocks > main {
  flex: 1;
  display: flex;
  flex-direction: column;
}
/* post-content mete un .entry-content de por medio: si no se encadena
   el flex, el amarillo termina antes que el main y aparece una banda
   blanca sobre el footer. */
body.home .wp-site-blocks > main > .entry-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}
body.home .kik-splash {
  min-height: 0;
  flex: 1;
}

/* ─── Task 12: formularios (Contact Form 7) ───
   Traduccion de ContactForm() / EmpresasForm() en Productores.tsx:368-391
   y Empresas.tsx:244-277. El <form> de React es flex column gap:14 con el
   h3 del titulo adentro; en WordPress el h3 vive fuera de <form> (CF7 es
   dueno de esa etiqueta), asi que el gap se replica en dos capas: el grupo
   .kik-form (h3 + shortcode) y, adentro, el propio form.wpcf7-form. */
.kik-form-title {
  font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 900;
  font-size: 18px;
  color: var(--wp--preset--color--blanco);
  margin: 0;
}
.kik-form {
  padding: clamp(20px, 3vw, 28px);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(4px);
}
.kik-form form.wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.kik-form form.wpcf7-form p { margin: 0; }
.kik-form label {
  display: block;
  font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 600;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 5px;
}
.kik-form input[type="text"],
.kik-form input[type="email"],
.kik-form textarea {
  width: 100%;
  padding: 10px 14px;
  border-radius: 11px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.95);
  font-size: 14px;
  color: #1a1a1a;
  box-sizing: border-box;
  font-family: var(--wp--preset--font-family--inter);
}
.kik-form textarea { resize: none; }
.kik-form input[type="submit"] {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  background: var(--wp--preset--color--yellow);
  color: var(--wp--preset--color--purple);
  border: none;
  font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
}
/* No estaba en el CSS de origen (el spec no valida del lado del servidor):
   hace falta que los mensajes de estado de CF7 se lean sobre fondo morado. */
.kik-form .wpcf7-response-output {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4) !important;
  font-family: var(--wp--preset--font-family--montserrat);
  font-size: 13px;
  margin: 0 !important;
}
.kik-form .wpcf7-not-valid-tip {
  color: var(--wp--preset--color--yellow-light);
  font-size: 12px;
  margin-top: 4px;
}

/* ─── Contorno de las fotos ────────────────────────────────────────────── */
/* Las fotos del diseño original eran tomas de banco a sangre: el borde de la
   imagen se distinguía solo por el contraste. Las fotos reales de producto
   vienen sobre fondo blanco, así que contra una sección blanca la imagen
   pierde el borde y se ve como si flotara sin forma.
   Se agrega una línea fina en el mismo vocabulario que ya usan las tarjetas
   CTA (border: 2px solid rgba(104,45,135,.1)) y las preguntas del FAQ. */
.kik-round-img img,
.kik-card-media .kik-card-img img,
.kik-plain-img-el img {
  border: 1px solid rgba(104, 45, 135, 0.14);
  box-sizing: border-box;
}

/* La imagen circular del equipo y la de "Por qué elegir KIK" ya llevan borde
   amarillo propio del diseño; no se les agrega otro encima. */
.kik-team-photo-wrap img,
.kik-round-yellow img {
  border: none;
}

/* ─── Fotos verticales: escalar sin recortar ──────────────────────────── */
/* Las fotos de producto del cliente vienen en proporciones muy distintas.
   Una vertical de 514x912 estiraba su sección a 1088px contra los 664px de
   una con foto apaisada. Recortarlas no es opción: cortaría productos de la
   composición. Se limita el alto y la imagen se achica manteniendo su
   proporción, centrada en la columna.
   El contenedor pasa a ajustarse a la imagen para que el offset amarillo
   la siga en vez de quedar suelto detrás. */
.kik-round-img {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  display: flex;
  justify-content: center;
}
.kik-round-img img {
  width: auto;
  height: auto;
  max-width: min(420px, 100%);
  max-height: 440px;
  object-fit: contain;
  display: block;
  margin-inline: auto;
}

/* ─── Sin sombra en las fotos editoriales ─────────────────────────────── */
/* El diseño original usaba fotos a sangre, donde la sombra separaba la
   imagen del fondo. Con fotos de producto sobre blanco, la sombra difumina
   ese blanco en una bruma gris y compite con el contorno que ahora define
   el borde. Se quita: el borde y el offset amarillo ya cumplen esa función. */
.kik-round-img img {
  box-shadow: none;
}

/* La foto de "Por qué Kik Merch" usa una clase distinta (imagen recortada
   sin marco), pero sufre el mismo problema de proporción. Mismo tratamiento. */
.kik-plain-img-el img {
  width: auto;
  height: auto;
  max-width: min(420px, 100%);
  max-height: 440px;
  object-fit: contain;
  display: block;
  margin-inline: auto;
}

/* ─── Fotos con transparencia ─────────────────────────────────────────── */
/* Algunas fotos de producto son recortes PNG con fondo transparente. Sin
   fondo propio, el rectángulo amarillo que va detrás (el offset del diseño)
   se ve a través de TODA la imagen y la tiñe de crema, en vez de asomar
   solo en los 10px del borde. Darles fondo blanco las deja igual que las
   fotos opacas y devuelve al amarillo su papel de acento. */
.kik-round-img img,
.kik-plain-img-el img,
.kik-card-media .kik-card-img img {
  background-color: #00000000;
}

/* ─── Imágenes circulares ─────────────────────────────────────────────── */
/* Si la foto tiene transparencia o una proporción distinta al círculo,
   queda un hueco donde el borde amarillo no encuentra imagen detrás.
   Con cover la imagen llena el círculo completo. */
.kik-round-yellow,
.kik-team-photo-wrap {
  overflow: hidden;
}
.kik-round-yellow img,
.kik-team-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Las fotos de producto traen un margen transparente alrededor del motivo.
     Al recortarlas en circulo queda una medialuna vacia abajo, donde el borde
     amarillo no encuentra imagen detras. Un zoom minimo la cubre sin fijar un
     color de fondo, asi sigue funcionando si se cambia la imagen. */
  transform: scale(1.08);
}

/* ═══ Ajustes pedidos por el cliente ═══════════════════════════════════ */

/* 1. Sin el rectángulo amarillo detrás de las fotos. Era el acento del
      diseño original (RoundImg), pero con fotos de producto se lee como
      una sombra mal registrada en vez de un detalle. */
.kik-round-img::before {
  display: none;
}

/* 2. Radio también en la foto suelta de "Por qué Kik Merch", que era la
      única rectangular dura entre fotos redondeadas. */
.kik-plain-img-el img {
  border-radius: 24px;
}

/* 3. La foto del equipo: círculo y nada más. Sin el aro exterior, sin el
      borde amarillo y sin sombra. */
.kik-team-photo-wrap::before {
  display: none;
}
.kik-team-photo-wrap .wp-block-image img,
.kik-team-photo-wrap img {
  border: none;
  box-shadow: none;
  border-radius: 50%;
}

/* ─── Texto restituido del Canva original ─────────────────────────────── */
/* La conversión a Figma Make habia acortado varias secciones. Estas clases
   dan lugar al texto que se repuso desde la fuente. */
.kik-modalidad-intro {
  font-family: var(--wp--preset--font-family--montserrat);
  font-size: 13px;
  color: #555;
  line-height: 1.6;
  margin: 0 0 6px 0;
}
.kik-modalidad-cierre {
  font-family: var(--wp--preset--font-family--montserrat);
  font-size: 13px;
  font-weight: 600;
  color: var(--wp--preset--color--purple);
  line-height: 1.6;
  margin: 6px 0 0 0;
}
.kik-cierre {
  font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 600;
  font-size: 14px;
  color: var(--wp--preset--color--purple);
  line-height: 1.7;
  max-width: 760px;
  margin: 28px auto 0;
  text-align: center;
}

/* ─── Fondo fijo de notas musicales ───────────────────────────────────── */
/* Pedido del cliente: el pentagrama del Canva de fondo, quieto mientras la
   página se desliza. El asset original es trazo blanco sobre transparente
   —pensado para el splash morado—, así que se derivó una versión en morado
   de marca con el alfa bajado al 16%, para que se lea sobre las secciones
   claras sin competir con el texto.
   Va sobre <html> y no sobre <body> para poder usar una capa fija propia
   sin pelear con el fondo que theme.json le pone al body. */
html {
  background-color: var(--wp--preset--color--blanco);
}
body {
  background-color: transparent;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url('../img/fondo-notas.webp');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  pointer-events: none;
}

/* Las secciones claras son transparentes y dejan ver el pentagrama; las
   grises y moradas lo tapan, lo que da el ritmo de aparición y descanso. */

@media (max-width: 768px) {
  /* En pantallas chicas el patrón compite con el texto: se achica y se
     ancla arriba, donde molesta menos. */
  body::before {
    background-size: 160% auto;
    background-position: center top;
  }
}

/* ─── Foto del equipo más grande ──────────────────────────────────────── */
/* El Canva la muestra en 443px; el diseño de Figma Make la habia bajado a
   200. Se recupera la escala original, con un tope para que no desborde la
   columna en pantallas intermedias. */
.kik-team-photo-wrap .wp-block-image img,
.kik-team-photo-wrap img {
  width: min(340px, 100%);
  height: auto;
  aspect-ratio: 1;
}
.kik-team-photo-wrap {
  width: min(340px, 100%);
  margin-inline: auto;
}

@media (max-width: 768px) {
  .kik-team-photo-wrap,
  .kik-team-photo-wrap .wp-block-image img,
  .kik-team-photo-wrap img {
    width: min(280px, 80vw);
  }
}

/* ─── Foto del equipo: circular ───────────────────────────────────────── */
/* La primera vez el recorte circular no cerraba y se dejó cuadrada: el
   contenedor tenía overflow:hidden con esquinas rectas sobre una caja que
   no era cuadrada, así que el 50% daba una elipse y encima la recortaba.
   Eso ya está resuelto — la regla de arriba fija aspect-ratio:1 y la caja
   mide 440x440 —, así que el 50% ahora sí da un círculo real. */
.kik-team-photo-wrap {
  border-radius: 50%;
  overflow: hidden;
}
.kik-team-photo-wrap .wp-block-image,
.kik-team-photo-wrap .wp-block-image img,
.kik-team-photo-wrap img {
  border-radius: 50%;
  transform: none;
  object-fit: cover;
}

/* ─── "Por qué elegir KIK" (Empresas): imagen sin marco ───────────────── */
/* A pedido del cliente: el borde amarillo y la sombra tapaban la imagen.
   Se quitan los dos, igual que en las fotos editoriales del resto del
   sitio, para que la pieza se lea sola. */
.kik-round-yellow .wp-block-image {
  border: none;
  box-shadow: none;
}
.kik-round-yellow .wp-block-image img {
  border: none;
  box-shadow: none;
}

/* El recorte circular no le sienta a esta pieza: el logo es horizontal y
   su fondo gris es rectangular, asi que el circulo le corta el badge de la
   derecha y deja huecos abajo. Pasa a rectangular con el mismo radio que
   el resto, y la imagen se muestra entera sin recorte. */
.kik-round-yellow .wp-block-image {
  width: min(420px, 100%);
  aspect-ratio: auto;
  border-radius: 24px;
}
.kik-round-yellow .wp-block-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 24px;
}

/* ─── Watermark de shows en la mitad amarilla del hero de Productores ─── */
/* Mismo tratamiento que en el splash de la portada: el mosaico de títulos
   de Broadway en multiply a baja opacidad, que sobre el amarillo lo
   oscurece apenas y da textura sin robarle protagonismo al copy. */
.kik-home-copy { position: relative; overflow: hidden; }
.kik-home-copy > * { position: relative; z-index: 1; }
.kik-home-copy::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  /* El cliente pidió el lado amarillo sin imagen, como en el Canva. */
  background: none;
  pointer-events: none;
}

/* ─── Watermark de shows en el hero de Empresas ───────────────────────── */
/* El asset es arte lineal claro (45% de trazo claro, nada oscuro), así que
   sobre el morado va en mezcla normal —que aclara— y no en multiply, que
   sobre un fondo oscuro no haría nada.
   Usa ::after porque el ::before de esa sección ya lo ocupa el patrón
   diagonal del diseño; las dos capas conviven. */
.kik-hero-centrado::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  /*background-image: url('../img/watermark-shows-oscuro.webp');*/
  background-size: cover;
  background-position: center;
  /* 4% y no más: el trazo aclara el morado, y a partir del 6% el h1
     amarillo cae por debajo del 4.5:1 de WCAG AA. Medido. */
  opacity: 0.10;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* ─── Aparición de secciones al entrar en pantalla ────────────────────── */
/* El contenido es visible por defecto: estas reglas solo aplican bajo
   .kik-anim, que agrega revelado.js. Si el JS no corre, la página se ve
   completa — nunca hay texto atrapado en opacity:0. */
.kik-anim .kik-revelar {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 620ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.kik-anim .kik-revelar.kik-visible {
  opacity: 1;
  transform: none;
}

/* Segunda red de seguridad, además de la del script: quien pidió menos
   movimiento ve todo quieto y visible. */
@media (prefers-reduced-motion: reduce) {
  .kik-anim .kik-revelar {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ─── El menú móvil no abría a pantalla completa ──────────────────────── */
/* backdrop-filter convierte al elemento que lo lleva en bloque contenedor
   de sus descendientes position:fixed. El overlay del menú es hijo del
   header, así que su inset:0 se resolvía contra el header —57px de alto—
   en vez de contra la ventana: abría, pero recortado a una franja.
   Medido: 390x56 con el filtro, 390x844 sin él.
   El desenfoque pasa a un pseudo-elemento: mismo efecto visual, y el
   header deja de capturar los posicionamientos fijos de adentro. */
.kik-header {
  background: transparent;
  backdrop-filter: none;
}
.kik-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  pointer-events: none;
}

/* Dentro del overlay abierto el fondo es morado, así que los enlaces van en
   blanco. La regla del header los pinta de morado para la barra sobre fondo
   claro, y ahí quedaban morado sobre morado: invisibles. */
.kik-header .wp-block-navigation__responsive-container.is-menu-open,
.kik-header .wp-block-navigation__responsive-container.is-menu-open a,
.kik-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  color: var(--wp--preset--color--blanco);
}
.kik-header .wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--wp--preset--color--purple);
}
.kik-header .wp-block-navigation__responsive-container.is-menu-open a {
  font-size: 17px;
  padding-block: 6px;
}

/* ─── Página no encontrada (templates/404.html) ────────────────────────── */
/* Sin esta plantilla WordPress cae en index.html, que solo trae el header,
   el footer y un post-content vacío: cualquier URL mal tipeada o enlace
   viejo daba una página en blanco, sin explicación ni salida. */
.kik-404 {
  min-height: calc(100vh - 92px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 24px;
  gap: 18px;
}
.kik-404 > * { margin-top: 0; margin-bottom: 0; }
.kik-404-titulo {
  font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 900;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.1;
  color: var(--wp--preset--color--blanco);
  text-wrap: balance;
  margin: 0;
  max-width: 16ch;
}
.kik-404-texto {
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
  max-width: 52ch;
  margin: 0;
}
.kik-404-cta { justify-content: center; margin-top: 8px; }
.kik-404-ayuda {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
}
.kik-404-ayuda a {
  color: var(--wp--preset--color--yellow);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ─── Banda del logo de la portada (parts/header-minimo.html) ──────────── */
/* Amarilla con el logo blanco de subtítulo violeta (adjunto 7), como el
   Canva. Tamaño agrandado según requerimiento del cliente sin generar scroll. */
.kik-logobar {
  padding-top: clamp(8px, 1.1vh, 14px) !important;
  padding-bottom: clamp(8px, 1.1vh, 14px) !important;
}
.kik-logobar-img { margin: 0; }
.kik-logobar-img img {
  height: clamp(66px, 12.2vh, 122px);
  width: auto;
  display: block;
}

/* El relleno y el logo del pie viven acá, no como estilos en línea del
   bloque: en línea ganaban a cualquier selector y el pie quedaba fijo en
   261px, comiéndose la portada en pantallas bajas. */
.kik-footer {
  padding-top: clamp(22px, 3.4vh, 40px);
  padding-bottom: clamp(22px, 3.4vh, 40px);
}
.kik-footer-logo { margin: 0; }
.kik-footer-logo img { width: clamp(136px, 17vh, 180px); height: auto; display: block; }

/* Mismo criterio dentro de las tarjetas: en pantallas bajas el relleno cede
   antes que el tamaño de la tipografía o de las fotos. */
body.home .kik-cta-card { padding: clamp(16px, 2.6vh, 28px) 24px clamp(14px, 2.4vh, 24px); }
body.home .kik-cta-card::before { margin-bottom: clamp(8px, 1.4vh, 14px); }
body.home .kik-cta-btn-wrap { margin-top: clamp(10px, 1.8vh, 18px); }
body.home .kik-splash-third { padding: clamp(10px, 1.8vh, 16px) 28px; gap: clamp(6px, 1.1vh, 10px); }

/* ─── Panel morado del hero de Productores: notas musicales ────────────── */
/* El cliente pidió notas, no las rayitas diagonales de textura, y el Canva
   lo confirma. Las notas del asset original son blancas y opacas, así que
   sobre el morado aclaran: al 8% dan rgb(116,62,145), casi exactamente el
   #723c8e que mide el Canva sobre su fondo #672d86. */
#home.kik-home-split .kik-home-img.kik-diagonal::before {
  background-image: url('../img/notas-blancas.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.08;
}

/* ─── Forma de las fotos: la del Canva ─────────────────────────────────── */
/* El cliente pidió respetar la forma de su diseño. En el Canva las fotos de
   contenido son rectángulos con las cuatro esquinas vivas menos la superior
   derecha, que lleva un radio muy grande (medido ~26% del lado en la sección
   "Qué es Kik Merch" y repetido igual en "Por qué Kik Merch").
   En porcentaje y no en px: las fotos del cliente vienen en proporciones muy
   distintas y el radio acompaña la caja de cada una, como en el original.
   No alcanza a la foto del equipo, que en el Canva es un círculo y usa
   .kik-team-photo-wrap. */
.kik-round-img img,
.kik-plain-img-el img {
  border-radius: 0px;
	border-width: 0px;
}

@media (max-width: 600px) {
  .kik-round-img img,
  .kik-plain-img-el img { border-radius: 0 0 0 0; border-width: 0px; }
}

/* ─── Textos desvaídos por debajo de AA ───────────────────────────────── */
/* Cuatro rótulos chicos se apoyaban en opacidad o en blanco translúcido
   para verse secundarios, y a 11-13px eso los dejaba por debajo del 4.5:1
   que pide WCAG AA. Se sube la opacidad lo justo para pasar: siguen
   leyéndose como secundarios, pero ahora se leen. Medido en cada caso. */

/* Rótulos de sección: morado al 50% sobre blanco daba 2.57. Al 80%, 5.40. */
.kik-eyebrow { opacity: 0.8; }

/* "o también" en la portada: morado al 45% sobre blanco daba 2.33. */
.kik-splash-divider-text { opacity: 0.72; }

/* "Merchandising Teatral" del hero de Empresas: blanco al 55% sobre el
   morado daba 3.84. */
.kik-hero-subtag { color: rgba(255, 255, 255, 0.78); }

/* Numeración de las tarjetas con foto: blanco al 45% sobre el degradado
   morado daba 3.06. */
.kik-card-num { color: rgba(255, 255, 255, 0.78); }

/* El rótulo de la sección de contacto era .kik-eyebrow a secas —morado—
   sobre .kik-section-dark, que es morado: texto invisible. El de "El
   siguiente paso" sí llevaba .kik-eyebrow-light, así que era un olvido
   puntual. Se resuelve por sección y no por clase suelta, para que
   cualquier rótulo que caiga en un fondo oscuro quede legible solo. */
.kik-section-dark .kik-eyebrow {
  color: var(--wp--preset--color--yellow);
  opacity: 1;
}

/* "o también" quedaba en 4.40, a un pelo del 4.5. */
.kik-splash-divider-text { opacity: 0.78; }

/* ─── Los dos casos de contraste que quedaban: los resuelve el Canva ───── */

/* 1. El CTA de WhatsApp. Era una pastilla verde #25D366 con texto blanco:
      2.02:1, por debajo del 4.5 que pide AA — blanco sobre ese verde no
      llega nunca. En el Canva el verde vive en el ícono, no en el fondo, y
      el texto va en morado sobre blanco. Así se conserva la señal de marca
      de WhatsApp y el texto sube a 7.48:1.
      Era, además, el único botón del sitio fuera del vocabulario: las otras
      llamadas a WhatsApp usan .kik-pill-btn (amarillo) o
      .kik-btn-outline-white. */
.kik-wa-btn {
  background: none;
  color: var(--wp--preset--color--purple);
  padding: 4px 0;
  box-shadow: none;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  gap: 12px;
}
.kik-wa-btn svg {
  width: 30px;
  height: 30px;
  padding: 6px;
  box-sizing: border-box;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
}

/* 2. La numeración "01…04" de "¿Qué podés desarrollar con KIK?".
      Amarillo sobre blanco daba 1.73:1. Pero además el Canva ahí no tiene
      numeración: usa viñetas, y son cuatro categorías paralelas —productos,
      eventos, regalos, especiales—, no los pasos de un proceso. Numerarlas
      afirmaba un orden que no existe.
      La viñeta pasa a CSS: es presentación, no contenido, y así el cliente
      no encuentra un "01" suelto para editar. Morado sobre blanco, 7.48:1. */
.kik-card-plain-title::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--wp--preset--color--purple);
  margin-right: 9px;
  vertical-align: 0.14em;
}