/* =====================================================================
   BeeWall · home nueva (página 1108) · ajustes responsive
   ---------------------------------------------------------------------
   Dónde ponerlo: Apariencia → Personalizar → CSS adicional.
   Todos los selectores llevan "body" delante a propósito: Kadence Blocks
   imprime el CSS de cada bloque dentro del <body>, después del CSS
   adicional, y con la misma especificidad ganaría el suyo.
   Alternativa: un bloque "HTML personalizado" al principio de la página
   con <style>…</style> y este contenido.

   Medido en la copia local a 390x844 (móvil) y 768x1024 (tablet).
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. WORK (carrusel de proyectos) · el fallo gordo
   La fila tiene padding-left/right de 200px SIN versión tablet/móvil.
   En un móvil de 375px eso deja 0px de ancho: el carrusel colapsa, la
   tarjeta se apila letra a letra y la sección mide 10.913px de alto.
   Lo ideal es ponerlo en el editor (fila WORK → Estilo → Padding →
   pestañas tablet/móvil); esto es el equivalente en CSS.
   --------------------------------------------------------------------- */
@media (max-width: 1024px) {
  body .kb-row-layout-id1108_4b8b44-22 > .kt-row-column-wrap {
    padding-top: 96px;
    padding-right: 48px;
    padding-bottom: 72px;
    padding-left: 48px;
  }
}
@media (max-width: 767px) {
  body .kb-row-layout-id1108_4b8b44-22 > .kt-row-column-wrap {
    padding-top: 64px;
    padding-right: 20px;
    padding-bottom: 56px;
    padding-left: 20px;
  }
  /* El título "WORK" (62px en tablet, 44px en móvil) sobra un poco a 375px */
  body .wp-block-kadence-advancedheading.kt-adv-heading1108_e41872-9f[data-kb-block] {
    font-size: clamp(36px, 11vw, 44px);
  }
}

/* ---------------------------------------------------------------------
   2. HERO
   "POLINIZADORES" mide 70px en móvil y ocupa 351 de 351px disponibles:
   cabe justo, pero cualquier fuente de sistema un poco más ancha lo rompe.
   Escala con el viewport hasta un máximo de 70px.
   --------------------------------------------------------------------- */
/* Kadence escribe estos títulos con selector doble
   (.wp-block-kadence-advancedheading.kt-adv-…[data-kb-block]), por eso el
   selector largo: con menos especificidad no gana. */
@media (max-width: 767px) {
  body .wp-block-kadence-advancedheading.kt-adv-heading1108_0417e1-fc[data-kb-block] {
    font-size: clamp(44px, 16vw, 70px);
    letter-spacing: -0.02em;
  }
  body .wp-block-kadence-advancedheading.kt-adv-heading1108_cd19d9-5e[data-kb-block],
  body .wp-block-kadence-advancedheading.kt-adv-heading1108_dc283c-77[data-kb-block] {
    font-size: clamp(22px, 7vw, 28px);
  }
}

/* ---------------------------------------------------------------------
   3. INDICADOR DE SCROLL
   En móvil la línea mide lo que la sección (564px) y el texto entra
   deslizándose desde -277px. En táctil nadie necesita que le digan que
   haga scroll: se oculta y la sección recupera su altura natural.
   Si prefieres mantenerlo, borra este bloque y deja el siguiente.
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
  body .scroll-indicator {
    display: none;
  }
}
/* Versión compacta (solo si NO lo ocultas):
@media (max-width: 767px) {
  .scroll-line-container { height: 160px !important; }
  #scroll-text { font-size: 18px; }
}
*/

/* ---------------------------------------------------------------------
   4. ALIEN (Lottie)
   Tiene width: 200% y margin-left: -50% en línea: en móvil sobresale
   147px por cada lado. Se recorta al contenedor y se reduce el exceso.
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
  body #lottie-alien {
    width: 140% !important;      /* en línea lleva 200%, por eso el !important */
    margin-left: -20% !important;
  }
}
/* Corta cualquier desbordamiento horizontal de los bloques decorativos
   (miel, alien) sin afectar al sticky de las secciones de scroll. */
body .entry-content > .kb-row-layout-wrap {
  overflow-x: clip;
}

/* ---------------------------------------------------------------------
   5. COLMENA ZOOM
   Texto ya escala bien (36px / 15px en móvil). Solo se acerca el párrafo
   al borde para que no quede una columna de 311px con márgenes grandes.
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
  body .hc-content {
    padding-left: 20px;
    padding-right: 20px;
  }
  body .hc-desc {
    max-width: none;
  }
}

/* ---------------------------------------------------------------------
   6. CORE REVEAL
   La altura de scroll ahora la calcula beewall-home.js según el viewport
   (antes 1800px fijos por círculo). Aquí solo el tamaño del texto.
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
  body .bw-core-title {
    font-size: clamp(56px, 20vw, 80px);
  }
  body .bw-core-word {
    font-size: clamp(20px, 7vw, 32px);
  }
}

/* ---------------------------------------------------------------------
   7. EQUIPO
   No hace falta tocarlo: la página ya tiene CSS propio para móvil
   (@media (max-width: 600px) .team-block { min-height: 550px; padding:
   40px 15px 110px; } y ajustes del dock), impreso en el <head> junto al
   resto de CSS adicional. Este archivo debería ir en ese mismo sitio.
   --------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   8. GLITCH
   El efecto era solo hover; en táctil beewall-home.js lo dispara al
   entrar en pantalla y al tocar. Aquí solo el margen.
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
  body #glitch-demo {
    margin: 2.5rem auto !important;
  }
}

/* ---------------------------------------------------------------------
   9. Botón de WhatsApp vs dock del equipo
   El botón flotante de WhatsApp (abajo-izquierda) puede pisar el dock en
   móviles estrechos. Se sube 8px y se separa del borde.
   --------------------------------------------------------------------- */
@media (max-width: 480px) {
  body .joinchat {
    --bottom: 16px;
    --side: 12px;
  }
}

/* =====================================================================
   10. Ajustes móvil de la segunda ronda (19/09) — medidos a 390x844
   ===================================================================== */
@media (max-width: 767px) {
  /* Hero: "POLINIZADORES" se partía en dos líneas (POLINIZAD/ORES).
     Una sola palabra, una sola línea: 10,4vw ≈ 40px en 390. */
  body .wp-block-kadence-advancedheading.kt-adv-heading1108_0417e1-fc[data-kb-block] {
    font-size: clamp(30px, 10.4vw, 70px);
    letter-spacing: -0.03em;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
  }
  body .wp-block-kadence-advancedheading.kt-adv-heading1108_cd19d9-5e[data-kb-block],
  body .wp-block-kadence-advancedheading.kt-adv-heading1108_dc283c-77[data-kb-block] {
    font-size: clamp(18px, 6vw, 28px);
  }

  /* Colmena: 4 pantallas de scroll fijo en móvil era demasiado. 2,6. */
  body .hc-wrapper {
    height: 260vh;
    height: 260svh;
  }

  /* CTA: "¿Hablamos?" partía el signo de interrogación a otra línea
     (las letras son spans). Una línea y un poco más pequeño. */
  body .bw-cta__title {
    font-size: clamp(2.4rem, 13vw, 13rem);
    white-space: nowrap;
  }

  /* Proceso: en móvil los paneles van seguidos; recuperamos el goteo de
     miel entre uno y otro. El SVG de cada panel (2-4) se coloca en su
     borde SUPERIOR, sin voltear (las gotas cuelgan hacia abajo), pintado
     del color del panel ANTERIOR: es la miel del panel de arriba cayendo
     sobre este. */
  body .bw-dp__panel { position: relative; overflow: hidden; }
  body .bw-dp__edge { display: block; top: -1px; bottom: auto; transform: none; height: clamp(40px, 12vw, 70px); z-index: 1; }
  body .bw-dp__panel:nth-child(2) .bw-dp__edge path { fill: #2c2c2c; }  /* 1 (negro) → 2 */
  body .bw-dp__panel:nth-child(3) .bw-dp__edge path { fill: #FFCB05; }  /* 2 (amarillo) → 3 */
  body .bw-dp__panel:nth-child(4) .bw-dp__edge path { fill: #FCF6E6; }  /* 3 (crema) → 4 */
  body .bw-dp__panel + .bw-dp__panel { padding-top: clamp(104px, 22vw, 140px); }
  body .bw-dp__num { right: 0; }
  body .bw-dp { overflow: hidden; }
}

/* =====================================================================
   11. CTA final: "¿Hablamos?" se recortaba por los lados (19/09)
   ---------------------------------------------------------------------
   El título lleva overflow:hidden para que las letras suban desde abajo
   al entrar. Pero el letter-spacing negativo deja la caja más estrecha
   que la tinta (el "?" perdía el borde derecho) y, mientras entran, las
   letras giradas de los extremos se cortaban. Ahora recortamos SOLO en
   vertical con clip-path: sobra 0,6em a cada lado.
   ===================================================================== */
body .bw-cta__title {
  overflow: visible;
  clip-path: inset(0 -0.6em);
  padding-left: 0.06em;   /* compensa el letter-spacing del último signo */
  padding-right: 0.06em;
}

/* =====================================================================
   12. Tipografía gigante: tope relativo a la ALTURA de pantalla (19/09)
   ---------------------------------------------------------------------
   Los tamaños iban solo con vw, así que en portátiles anchos y bajos
   (1366x768, 1536x864) el contenido "se pasaba de grande": palabras de
   Proceso y CORE ocupando media pantalla, el número decorativo del paso
   más alto que el panel, el marquee y el CTA desbordando. Ahora cada
   tamaño es el menor entre su clamp por anchura y un tope por altura.
   ===================================================================== */
body .bw-kin__txt   { font-size: min(clamp(3rem, 9vw, 8.5rem), 14vh); }
body .bw-core-title { font-size: min(clamp(5rem, 15vw, 14rem), 24vh); }
body .bw-core-word  { font-size: min(clamp(2rem, 5vw, 5rem), 7vh); }
body .bw-dp__word   { font-size: min(clamp(2.8rem, 9.5vw, 8.8rem), 13vh); }
body .bw-dp__num    { font-size: min(clamp(14rem, 40vw, 38rem), 62vh); }
body .bw-dp__text   { font-size: min(clamp(1rem, 1.35vw, 1.2rem), 2.4vh); }
body .bw-sw__title  { font-size: min(clamp(2rem, 4.6vw, 4rem), 7.5vh); }
body .bw-sw__labels li { font-size: min(clamp(1.2rem, 2.6vw, 2.2rem), 4.2vh); }
body .bw-team__title { font-size: min(clamp(2.6rem, 6.4vw, 6.4rem), 12vh); }
body .bw-cta__title { font-size: min(clamp(3.4rem, 15vw, 13rem), 26vh); }
@media (max-width: 767px) {
  /* en móvil (alto > ancho) mandan las reglas por anchura de las secciones anteriores */
  body .bw-kin__txt { font-size: clamp(3rem, 9vw, 8.5rem); }
  body .bw-dp__word { font-size: clamp(2.6rem, 8vw, 6.5rem); }
  body .bw-dp__num { font-size: clamp(9rem, 55vw, 16rem); }
  body .bw-dp__text { font-size: 1rem; }
  body .bw-sw__title { font-size: clamp(2rem, 4.6vw, 4rem); }
  body .bw-sw__labels li { font-size: clamp(1.2rem, 2.6vw, 2.2rem); }
  body .bw-team__title { font-size: clamp(2.6rem, 6.4vw, 6.4rem); }
  body .bw-core-title { font-size: clamp(56px, 20vw, 80px); }
  body .bw-core-word { font-size: clamp(20px, 7vw, 32px); }
  body .bw-cta__title { font-size: clamp(2.4rem, 13vw, 13rem); }
}

/* 13) Kadence mete margin-top: 1.5em (y margin-bottom) a los h2 del contenido:
   en "¿Hablamos?" eran 312px de aire entre el kicker y el título (y 138px en
   el equipo). Los bloques los definen con margin: 0. */
body .bw-team__title, body .bw-cta__title { margin-top: 0 !important; }
body .bw-cta__title { margin-bottom: 28px !important; }