/* ============================================================
   KIKU Responsive — capa movil y tablet del rediseno 2027.

   html.kiku-flat  movil (< 768) y tablet vertical tactil (768-1023):
                   los motores sueltan las secciones pegadas.
   html.kiku-tab   solo la tablet vertical.
   html.kiku-r-off la portada (Inicio): esta capa no la toca.
   @media (max-width: 767px) lo que es solo del telefono.

   Selectores con "html body .elementor" (+ !important donde hay que
   ganarle a un estilo en linea que pone el motor o a un estilo local
   de Elementor).
   ============================================================ */


/* ------------------------------------------------------------
   0. Comunes
   ------------------------------------------------------------ */

/* Encabezados de 100 vh (los marca responsive.js): sin el hueco
   enorme entre el titular y el texto */
html.kiku-flat body .elementor .kiku-r-autoh{min-height:0!important}
html.kiku-flat body .elementor .kiku-r-stack{justify-content:flex-start!important;gap:clamp(36px,7vw,64px)!important;padding-block-end:clamp(56px,9vw,88px)!important}

/* Menos aire entre el menu y el primer bloque (kiku-r-top lo pone
   responsive.js en el contenedor que trae el relleno de arriba) */
@media (max-width:767px){
  html body .elementor .kiku-r-top{padding-block-start:20px!important}
}
html.kiku-tab body .elementor .kiku-r-top{padding-block-start:32px!important}

/* Carruseles deslizables (kiku-r-car lo pone responsive.js en movil).
   --kr-pad es el relleno lateral de la seccion: el carrusel llega al
   borde de la pantalla y la primera tarjeta queda alineada al texto. */
@media (max-width:767px){
  html body .elementor .kiku-r-car{
    display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;
    grid-template-columns:none!important;
    align-items:stretch!important;align-self:stretch!important;
    width:auto!important;max-width:none!important;
    margin-inline:calc(-1 * var(--kr-pad,24px))!important;
    padding:6px var(--kr-pad,24px) 4px!important;gap:14px!important;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding-inline:var(--kr-pad,24px);
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  html body .elementor .kiku-r-car::-webkit-scrollbar{display:none}
  html body .elementor .kiku-r-car > *{
    flex:0 0 84%!important;width:84%!important;max-width:none!important;min-width:0!important;
    scroll-snap-align:start;
    /* dentro del carrusel no hay "fade al entrar": las tarjetas que no
       se ven nunca entran por scroll vertical y quedarian invisibles */
    opacity:1!important;transform:none!important;
  }
}

/* puntos de los carruseles */
.kiku-r-dots{display:flex;justify-content:center;gap:8px;margin:14px 0 4px}
.kiku-r-dot{width:8px;height:8px;padding:0;border:0;border-radius:999px;background:currentColor;opacity:.25;cursor:pointer;transition:width .25s,opacity .25s}
.kiku-r-dot.is-on{width:22px;opacity:1}
.kiku-r-dot:focus-visible{outline:2px solid var(--kiku-magenta,#ff0066);outline-offset:3px}
@media (min-width:768px){.kiku-r-dots{display:none}}


/* ------------------------------------------------------------
   1. Paginas de servicio (Brujula, Estudio, Conecta, Radar,
      Flash Task): kiku-sp-*
   ------------------------------------------------------------ */

/* Capitulo 2: el escenario de los capitulos quedaba con alto 0 y las
   tarjetas se montaban sobre el Capitulo 3. */
html.kiku-flat body .elementor .kiku-sp-ch-stage{flex:none!important;height:auto!important;min-height:0!important}
html.kiku-flat body .elementor .kiku-sp-ch-count{display:none!important}

/* Capitulo 3 (antes / con KIKU): en el telefono las dos columnas de
   170 px no se leen y en la tablet plana el "antes" quedaba tapado.
   En plano van una arriba de la otra. */
html.kiku-flat body .elementor .kiku-wipe > .kiku-pin-inner{flex-direction:column!important;padding:0!important}
html.kiku-flat body .elementor .kiku-sp-wipe-pane{position:relative!important;inset:auto!important;width:100%!important;max-width:none!important;flex:none!important;clip-path:none!important}
html.kiku-flat body .elementor .kiku-sp-wipe-in{width:100%!important;max-width:none!important;padding-block:clamp(56px,9vw,88px)!important}
html.kiku-flat body .elementor .kiku-sp-wipe-hint{display:none!important}

/* Capitulo 1 en la tablet: el aire que en movil le da Elementor */
html.kiku-tab body .elementor .kiku-sp-prob-in{padding-block:104px 88px!important}

@media (max-width:767px){
  /* margenes de 10 px -> 20 px */
  html body .elementor .kiku-sp-wrap{padding-inline:20px!important}

  /* los dos botones del hero se salian de la pantalla */
  html body .elementor .kiku-sp-ctas{width:100%!important;max-width:100%!important;flex-wrap:wrap!important;gap:18px 24px!important;align-items:center!important}
  html body .elementor .kiku-sp-ctas > *{max-width:100%!important}
  html body .elementor .kiku-sp-ghost{white-space:normal!important}
}


/* ------------------------------------------------------------
   2. Soluciones
   ------------------------------------------------------------ */
@media (max-width:767px){
  /* "E-commerce" se partia en el guion */
  html body .elementor .kiku-seg-h{font-size:clamp(36px,11.5vw,52px)!important}
  html body .elementor .kiku-seg-h .kiku-mask{white-space:nowrap}
}


/* ------------------------------------------------------------
   3. KIKU HUB y Blog
   ------------------------------------------------------------ */
@media (max-width:767px){
  /* "de tu empresa" cabe en un renglon y el punto magenta queda pegado */
  html body .elementor .kiku-hub-hero .kiku-hub-w{font-size:min(1em,12vw)!important}

  /* Pestanas de categoria: una fila deslizable en vez de tres renglones */
  html body .elementor .e-con:has(> .kiku-blog-tab){
    flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;
    align-self:stretch!important;width:auto!important;max-width:none!important;
    margin-inline:-24px!important;padding:2px 24px!important;
    -webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent);
  }
  html body .elementor .e-con:has(> .kiku-blog-tab)::-webkit-scrollbar{display:none}
  html body .elementor .kiku-blog-tab{flex:0 0 auto!important;white-space:nowrap!important}
}

/* KIKU HUB movil (Hub.dc.html, version movil nueva): caja dibujada en el
   hero, las 4 herramientas en tarjetas de 2 x 2, taller corto y CTA con
   botones de ancho completo. La caja animada no va en el telefono.
   Los elementos kiku-hub-m* son solo del movil: su clase global los
   oculta (display:none) y aca se encienden. */
@media (max-width:767px){
  /* hero */
  html body .elementor .kiku-hub-hero-in{padding-inline:20px!important;padding-bottom:64px!important;gap:36px!important;justify-content:flex-start!important}
  html body .elementor .kiku-hub-h1{font-size:clamp(46px,13vw,80px)!important;line-height:.95!important;letter-spacing:-.045em!important}
  html body .elementor .kiku-hub-hero-bottom{display:none!important}

  html body .elementor .kiku-hub-mbox{display:block!important;position:relative;width:100%;padding:0!important;margin-top:calc(19% + 12px)!important;container-type:inline-size}
  html body .elementor .kiku-hub-mlid{position:absolute!important;left:-2%;right:-2%;width:auto!important;bottom:calc(100% - 2px);height:11cqw;padding:0!important;background:var(--kiku-magenta);border:2px solid var(--kiku-ink);border-radius:2.4cqw 2.4cqw .6cqw .6cqw;box-sizing:border-box}
  html body .elementor .kiku-hub-mlid::after{content:"";position:absolute;left:38%;right:38%;bottom:100%;height:7cqw;box-sizing:border-box;border:2px solid var(--kiku-ink);border-bottom:none;border-radius:999px 999px 0 0}
  html body .elementor .kiku-hub-mbody{width:100%!important;aspect-ratio:2.4/1;box-sizing:border-box;padding:0!important;background:#fff;border:2px solid var(--kiku-ink);border-radius:.6cqw .6cqw 4cqw 4cqw;box-shadow:5px 5px 0 var(--kiku-ink);display:flex!important;flex-direction:column!important;align-items:center;justify-content:center;gap:1.6cqw!important}
  html body .elementor .kiku-hub-mlogo{color:var(--kiku-ink);font-size:16cqw;font-weight:900;line-height:1;letter-spacing:-.04em}
  html body .elementor .kiku-hub-mlogo::after{content:".";color:var(--kiku-magenta)}
  html body .elementor .kiku-hub-mcap{color:var(--kiku-ink);font-size:3cqw;font-weight:700;letter-spacing:.36em;text-transform:uppercase;line-height:1.2}
  html body .elementor .kiku-hub-mnote{display:block!important;margin:0;color:var(--kiku-ink);font-size:20px;font-weight:300;line-height:1.3}
  html body .elementor .kiku-hub-mnote strong{font-weight:900}

  /* la caja animada queda solo para escritorio */
  html body .elementor .kiku-hub-box-wrap{display:none!important}

  /* las herramientas: tarjetas de 2 x 2 */
  html body .elementor .kiku-hub-list-in{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px!important;padding:0 20px 88px!important}
  html body .elementor .kiku-hub-list-head{grid-column:1 / -1;padding:0 0 12px!important}
  html body .elementor .kiku-hub-list-h2{font-size:34px!important;font-weight:300!important;line-height:1.05!important;letter-spacing:-.03em!important}
  html body .elementor .kiku-hub-list-h2 strong{display:block}
  html body .elementor .kiku-hub-list-note{display:none!important}

  html body .elementor .kiku-hub-art{
    position:relative;display:grid!important;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr auto auto;
    grid-template-areas:"ico soon" ". ." "h h" "cta cta";
    aspect-ratio:4/5;box-sizing:border-box;padding:16px!important;gap:0!important;
    border:2px solid var(--kiku-ink)!important;border-radius:24px;box-shadow:4px 4px 0 var(--kiku-ink);
    background:var(--kiku-yellow);color:var(--kiku-ink);transition:transform .15s;
  }
  html body .elementor .kiku-hub-art:active{transform:scale(.98)}
  html body .elementor .kiku-hub-art:nth-of-type(2){background:var(--kiku-pink)}
  html body .elementor .kiku-hub-art:nth-of-type(3){background:var(--kiku-teal)}
  html body .elementor .kiku-hub-art:nth-of-type(4){background:var(--kiku-blue)}
  html body .elementor .kiku-hub-art:nth-of-type(n+3)::after{
    content:"Pronto";grid-area:soon;justify-self:end;align-self:start;
    font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;line-height:1;
    color:#fff;background:var(--kiku-ink);border-radius:999px;padding:5px 9px;
  }
  html body .elementor .kiku-hub-art-head,
  html body .elementor .kiku-hub-art-left,
  html body .elementor .kiku-hub-art-mask,
  html body .elementor .kiku-hub-art-body,
  html body .elementor .kiku-hub-art-col{display:contents!important}
  html body .elementor .kiku-hub-art-n,
  html body .elementor .kiku-hub-art-p,
  html body .elementor .kiku-hub-art .kiku-hub-list{display:none!important}

  html body .elementor .kiku-hub-art .kiku-hub-badge{grid-area:ico;width:46px!important;height:46px!important;margin:0!important;border:0!important;border-radius:16px 16px 16px 4px!important;background:var(--kiku-ink)!important}
  html body .elementor .kiku-hub-art .kiku-hub-badge-i{font-size:24px!important;color:#fff!important}
  html body .elementor .kiku-hub-art-h{grid-area:h;margin:0 0 8px!important;font-size:clamp(22px,6.4vw,30px)!important;font-weight:900!important;line-height:1!important;letter-spacing:-.03em!important;color:var(--kiku-ink)!important;transform:none!important;opacity:1!important}
  html body .elementor .kiku-hub-art-h strong{font-weight:inherit}
  html body .elementor .kiku-hub-art .kiku-hub-ul{grid-area:cta;position:static!important;border:0!important;padding:0!important;gap:6px!important;font-size:13px!important;font-weight:700!important;color:var(--kiku-ink)!important}
  html body .elementor .kiku-hub-art .kiku-hub-ul span{font-size:13px!important;font-weight:700!important}
  /* toda la tarjeta es el enlace */
  html body .elementor .kiku-hub-art .kiku-hub-ul::after{content:"";position:absolute;inset:0;border-radius:22px}
  html body .elementor .kiku-hub-art .kiku-hub-ul:focus-visible{outline:none}
  html body .elementor .kiku-hub-art .kiku-hub-ul:focus-visible::after{outline:3px solid var(--kiku-magenta);outline-offset:4px}

  /* el taller: corto, sin la frase larga que se enciende */
  html body .elementor .kiku-hub-taller{padding:16px 0 0!important;background-size:40px 40px!important}
  html body .elementor .kiku-hub-taller-in{padding-inline:20px!important;padding-bottom:88px!important;gap:20px!important;justify-content:flex-start!important}
  html body .elementor .kiku-hub-taller-k{color:var(--kiku-yellow)!important;font-size:12px!important;letter-spacing:.14em!important;text-transform:uppercase}
  html body .elementor .kiku-hub-taller-p{display:none!important}
  html body .elementor .kiku-hub-mtaller{display:block!important;margin:0;color:#fff;font-size:clamp(40px,11.6vw,68px);font-weight:100;line-height:.98;letter-spacing:-.045em}
  html body .elementor .kiku-hub-mtaller strong{font-weight:900}
  html body .elementor .kiku-hub-mtaller strong span{color:var(--kiku-magenta)}
  html body .elementor .kiku-hub-taller .kiku-hub-ul{font-size:16px!important}

  /* CTA: dos botones de ancho completo */
  html body .elementor .kiku-hub-cta{padding:16px 0 56px!important}
  html body .elementor .kiku-hub-cta-in{padding-inline:20px!important}
  html body .elementor .kiku-hub-cta-h{font-size:clamp(40px,11.6vw,68px)!important;line-height:.98!important}
  html body .elementor .kiku-hub-cta-row{flex-direction:column!important;align-items:stretch!important;gap:12px!important}
  html body .elementor .kiku-hub-cta-btn,
  html body .elementor .kiku-hub-cta-alt{display:block!important;padding:0!important;border-radius:999px;text-align:center}
  html body .elementor .kiku-hub-cta-btn a,
  html body .elementor .kiku-hub-cta-alt a{height:60px;box-sizing:border-box;display:flex!important;align-items:center;justify-content:center;border-radius:999px;font-size:18px!important;font-weight:900;text-decoration:none!important}
  html body .elementor .kiku-hub-cta-alt a{border:2px solid #fff;color:#fff!important}
  /* "o agenda una sesion gratis" -> "Agenda una sesion gratis" (el lector
     de pantalla sigue leyendo el texto original) */
  html body .elementor .kiku-hub-cta-alt a{font-size:0!important}
  html body .elementor .kiku-hub-cta-alt a::after{content:"Agendá una sesión gratis";content:"Agendá una sesión gratis" / "";font-size:18px}
}


/* ------------------------------------------------------------
   4. Casos
   ------------------------------------------------------------ */
@media (max-width:767px){
  html body .elementor .kiku-cs-quote{font-size:clamp(19px,5.4vw,22px)!important;line-height:1.45!important}
}


/* ------------------------------------------------------------
   5. Kikultura
   ------------------------------------------------------------ */
@media (max-width:767px){
  /* Cultura: las 5 tarjetas de 430 px pasan a filas compactas,
     foto a la izquierda y texto a la derecha */
  html body .elementor .kiku-anchor-cultura .e-con:has(> .kiku-cul-mh){
    display:grid!important;grid-template-columns:96px minmax(0,1fr)!important;
    grid-template-rows:auto auto;column-gap:16px!important;row-gap:2px!important;
    align-items:center!important;padding:12px!important;min-height:0!important;height:auto!important;
  }
  html body .elementor .kiku-anchor-cultura .e-con:has(> .kiku-cul-mh) > img,
  html body .elementor .kiku-anchor-cultura .e-con:has(> .kiku-cul-mh) > picture{
    grid-row:1 / span 2;width:96px!important;height:96px!important;max-width:none!important;
    aspect-ratio:1/1;object-fit:cover;border-radius:14px;overflow:hidden;margin:0!important;
  }
  html body .elementor .kiku-anchor-cultura .e-con:has(> .kiku-cul-mh) > picture img{width:100%!important;height:100%!important;object-fit:cover}
  html body .elementor .kiku-anchor-cultura .e-con:has(> .kiku-cul-mh) > .kiku-cul-mh{align-self:end;margin:0!important;font-size:clamp(22px,6.4vw,26px)!important}
  html body .elementor .kiku-anchor-cultura .e-con:has(> .kiku-cul-mh) > p{align-self:start;margin:0!important}

  /* Socios: el retrato cuadrado ocupaba toda la pantalla */
  html body .elementor .kiku-anchor-socios .kiku-r-car > *{flex-basis:78%!important;width:78%!important}
}


/* ------------------------------------------------------------
   6. Tablet vertical (html.kiku-tab): lo que en movil hacen los
      estilos "mobile" de Elementor y en tablet faltaba
   ------------------------------------------------------------ */

/* toda seccion alta queda del alto de su contenido */
html.kiku-tab body .elementor .kiku-pin-wrap:not(.kiku-cul-wrap){height:auto!important}
html.kiku-tab body .elementor .kiku-pin-wrap:not(.kiku-cul-wrap) > .kiku-pin-inner{position:relative!important;top:auto!important;height:auto!important;min-height:0!important;overflow:visible!important}
html.kiku-tab body .elementor .kiku-sp-pin{position:relative!important;height:auto!important;overflow:visible!important}