@charset "utf-8";
/* ==========================================================================
   IGNITE Global Marketing - Capa responsive
   Se carga DESPUES de ignite.css / style.css / mobile.css.

   Estrategia:
   - >1280px  : diseno de escritorio original intacto (solo se corrigen
                desbordes horizontales puntuales).
   - <=1280px : "modo flujo". Se neutraliza el lienzo de posicionamiento
                absoluto (top/height en px fijos) para que las secciones se
                apilen en el orden del DOM y crezcan con su contenido.
                Esto es lo que hace que EN / ES / TW (textos de longitud
                distinta) dejen de solaparse.
   ========================================================================== */

:root {
  --hdr: 64px;
  --gut: 6vw;
}

/* --------------------------------------------------------------------------
   1. Higiene global (todas las resoluciones)
   -------------------------------------------------------------------------- */

html {
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  max-width: 100%;
}

/* model-viewer se renderiza a 800px fijos y desbordaba incluso en escritorio */
model-viewer.dmode {
  width: 100%;
  max-width: 100%;
}

/* la flecha de volver arriba estaba en left:97% y se salia del viewport */
.flecha {
  left: auto !important;
  right: 14px;
}

/* --------------------------------------------------------------------------
   2. MODO FLUJO  (<= 1280px)
   -------------------------------------------------------------------------- */

@media (max-width: 1280px) {

  /* Solo en modo flujo: el escritorio usa width + padding en % que suman
     mas de 100 y depende de content-box. */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  body {
    padding-top: var(--hdr);
    font-size: 18px;
  }

  img,
  video,
  canvas,
  iframe,
  model-viewer {
    max-width: 100%;
  }

  /* carruseles infinitos: la pista es larguisima a proposito, el contenedor
     debe recortarla siempre */
  .contlogos,
  .awards-carousel,
  .content-carrousel {
    overflow: hidden !important;
    max-width: 100% !important;
  }

  /* ---- 2.1 Cabecera fija real -------------------------------------------- */

  /* ignite.js aplica display:none sobre #princi al hacer scroll; !important
     gana a los estilos inline, asi la cabecera nunca desaparece en movil */
  header#princi {
    display: block !important;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--hdr);
    /* barra clara: el PNG del logo lleva el texto en negro */
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 2px solid #ff8000;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    z-index: 9000;
  }

  #logor.logo {
    position: absolute !important;
    top: 8px;
    left: 14px;
    margin: 0 !important;
    z-index: 2;
  }

  #logor.logo img {
    height: 46px;
    width: auto;
    display: block;
  }

  #logor.logo:hover {
    opacity: 1;
    filter: none;
    transform: none;
  }

  #menb.bo {
    display: block !important;
    position: absolute !important;
    top: 18px;
    right: 16px;
    width: 30px;
    cursor: pointer;
    filter: invert(1);
    z-index: 3;
  }

  nav#men.menu {
    position: absolute !important;
    top: var(--hdr);
    left: 0;
    right: 0;
    width: 100vw;
    max-height: calc(100vh - var(--hdr));
    overflow-y: auto;
    margin: 0 !important;
    padding: 0 !important;
    background: #000;
    border: 0;
    border-top: 2px solid #ff8000;
    text-align: left;
    display: none;
    z-index: 9001;
  }

  nav#men.menu .menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  nav#men.menu .menu-list li {
    display: block;
    margin: 0 !important;
    border-bottom: 1px solid #222;
  }

  nav#men.menu .menu-list a {
    display: block;
    height: auto;
    line-height: 1.4;
    padding: 15px 20px !important;
    color: #fff !important;
    font-size: 17px;
  }

  nav#men.menu .menu-list a:hover,
  nav#men.menu .menu-list a.active {
    color: #ff8000 !important;
    background: rgba(255, 255, 255, 0.06);
  }

  /* ---- 2.2 Neutralizacion del lienzo absoluto ---------------------------- */

  /* bandas de ancho completo posicionadas con top en px */
  .conttxlogos,
  .contlogos,
  .cont4,
  .cont4a,
  .cont5,
  .cont41,
  .cont42,
  .cont43,
  .cont44,
  .cont45,
  .cont46,
  .cont47,
  .acont47,
  .acont47hb,
  .cont48,
  .cont49,
  .cont51,
  .cont51zz,
  .cont52,
  .cont52u,
  .cont53,
  .cont53u,
  .cont54,
  .cont54h,
  .cont55,
  .cont55gr,
  .cont55fp,
  .contseb,
  .icontcase,
  .icontcase21,
  .icontcases,
  .icontcases2,
  .icontcases77,
  .icontcasesli,
  .icontcaseslic,
  .iconteam,
  .cases9,
  .cases9y,
  .cases10,
  .awards-section,
  .footerhome,
  .footerse,
  .footerab,
  .footercon,
  .footerfaq,
  .footerpo,
  .footerblog,
  .copytoph,
  .copytopha,
  .copytophay,
  .copyw,
  .copyblog {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: var(--gut) !important;
    padding-right: var(--gut) !important;
    display: block !important;
    transform: none !important;
    overflow: visible;
  }

  /* El fondo de la banda sigue yendo a sangre porque los videos/imagenes de
     fondo son position:absolute y se resuelven contra la caja de padding. */

  /* Un unico nivel de gotera: la ponen la banda o el envoltorio .rel*, nunca
     los bloques interiores (si no, se duplicaria). */
  .tx2,
  .tx2k,
  .tx3,
  .tx3k,
  .txa,
  .tx5,
  .txser1,
  .txser2,
  .nomary,
  .awards-content,
  .but35,
  .rejilla0,
  .rejilla1,
  .rejilla88,
  .rejilla333,
  .rejilla333a,
  .rejilla333m,
  .repo1,
  .repo2,
  .repo3,
  .repo4,
  .repo5,
  .repo6,
  .icontcase1,
  .contaca,
  .content-carrousel,
  .fondor {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* bandas contenedoras con top/height fijos */
  .rel2,
  .rel21rr,
  .rel21conta,
  .rel2cc,
  .relfa,
  .relq21,
  .relq21x,
  .relq21p,
  .relq21p2,
  .rel210,
  .relblog,
  .relpri {
    position: relative !important;
    top: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding-left: var(--gut);
    padding-right: var(--gut);
    overflow: hidden;
  }

  /* la imagen-banner de "quienes somos" debe seguir a sangre */
  .rel210 > img,
  .relq21x > img,
  .relq21 > img {
    margin-left: calc(var(--gut) * -1);
    margin-right: calc(var(--gut) * -1);
    width: calc(100% + var(--gut) * 2) !important;
    max-width: none;
  }

  /* bloques de texto interiores con padding-left 25% / padding-right 45% */
  .cont1,
  .cont2,
  .cont11,
  .cont11rr,
  .cont2rr,
  .contss,
  .contblogg,
  .cont9113,
  .cont911,
  .icontcase2,
  .icontcase1s,
  .cajaw,
  .pastilla,
  .pastilla2,
  .pastilla3,
  .pastilla4,
  .pastilla5,
  .pastilla6,
  .pastilla7,
  .pastilla8 {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: block !important;
  }

  /* tarjetas glass centradas */
  .cont011,
  .cont011g,
  .cont011ov,
  .cont511,
  .contm011,
  .creat,
  .creat3,
  .bajo2,
  .topma {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 24px 0 !important;
    padding: 24px !important;
  }

  /* desplazamientos decorativos que se salen de pantalla */
  .alx,
  .alilu,
  .cont5 {
    padding-left: 0 !important;
    margin-top: 0 !important;
  }

  .mariposa,
  .mariposa2,
  .mariposax,
  .mariposa2x,
  .fugaz1,
  .fugaz2,
  .fugaz3,
  .fugaz4,
  .criaturas1,
  .criaturas2,
  .criaturas3,
  .criaturas4,
  .criaturas5,
  .criaturas6,
  .criaturas7,
  .criaturas8 {
    display: none !important;
  }

  /* la animacion de opacidad la dispara el scroll; en flujo debe verse siempre */
  .nover,
  .cont4,
  .cont4a,
  #serv3,
  #wear,
  #lett3,
  #jelou {
    opacity: 1 !important;
  }

  /* videos de fondo dentro de bandas */
  .fond,
  .fondt,
  .fondl,
  .fond1,
  .fond2,
  .fondtaa {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }

  .rel210 img {
    position: relative !important;
    top: 0 !important;
    width: 100%;
  }

  /* ---- 2.3 Hero (portada) ------------------------------------------------ */

  #cabez {
    position: relative;
    display: block;
    height: 100vh;
    min-height: 540px;
    margin-top: calc(var(--hdr) * -1);
    overflow: hidden;
    background: #eef1f4;
  }

  #cabez > div:first-of-type {
    position: absolute;
    inset: 0;
  }

  .videocover,
  .imgfondoz {
    position: absolute !important;
    top: 0 !important;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block !important;
  }

  #semos.tx1 {
    position: absolute !important;
    top: auto !important;
    bottom: 30%;
    left: 0;
    width: 100%;
    padding: 0 var(--gut);
    display: flex !important;
    justify-content: center;
  }

  #bat.but1 {
    position: absolute !important;
    top: auto !important;
    bottom: 8%;
    left: 0;
    width: 100%;
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 0 var(--gut);
    margin: 0 !important;
  }

  #bat.but1 > div {
    display: none;
  }

  .lin {
    display: inline-block;
    padding: 16px 22px !important;
    margin: 6px !important;
    font-size: 16px;
  }

  .lin:hover {
    padding: 16px 22px;
    margin: 6px;
    font-size: 16px;
  }

  /* ---- 2.4 Rejillas ------------------------------------------------------ */

  .rejilla0,
  .rejilla1 {
    grid-template-columns: 1fr !important;
    margin: 0 !important;
  }

  .rejilla333,
  .rejilla333a,
  .rejilla333m,
  .repo1,
  .repo2,
  .repo3,
  .repo4,
  .repo5,
  .repo6 {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    gap: 30px !important;
    margin: 30px 0 !important;
    padding-bottom: 0 !important;
    width: 100% !important;
  }

  .service-boxq,
  .service-m {
    width: 100% !important;
    margin: 0 !important;
    flex-basis: auto !important;
  }

  .icontcase1 {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    gap: 24px;
    margin: 0 !important;
  }

  .contaca {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px;
    width: 100% !important;
    margin: 0 !important;
  }

  .rejilla88 {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    gap: 24px 10px !important;
    top: auto !important;
    width: 100% !important;
    text-align: center;
  }

  .copyright {
    position: relative !important;
    top: auto !important;
    margin: 0 !important;
    padding: 24px 0 40px !important;
  }

  .fcs {
    width: 100% !important;
    max-width: 420px;
  }

  .content-carrousel figure {
    width: 100%;
    height: auto;
  }

  /* ---- 2.5 Ritmo vertical de las bandas ---------------------------------- */

  .cont4,
  .cont4a,
  #serv3,
  .icontcase,
  .icontcases,
  .icontcases77,
  .icontcasesli,
  .icontcaseslic,
  .iconteam,
  .awards-section,
  .cont41,
  .cont42,
  .cont43,
  .cont44,
  .cont45,
  .cont46,
  .cont47,
  .acont47,
  .acont47hb,
  .cont48,
  .cont49,
  .cont51,
  .cont51zz,
  .cont52,
  .cont52u,
  .cont53,
  .cont53u,
  .cont54,
  .cont54h,
  .cont55,
  .cont55gr,
  .cont55fp,
  .cases9,
  .cases9y,
  .cases10,
  .conttxlogos {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }

  .contlogos {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: 70px !important;
    background-color: #000;
  }

  .footerhome,
  .footerse,
  .footerab,
  .footercon,
  .footerfaq,
  .footerpo,
  .footerblog {
    padding-top: 40px !important;
    padding-bottom: 20px !important;
  }

  .copytoph,
  .copytopha,
  .copytophay,
  .copyw,
  .copyblog {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .copyr,
  .copyrab,
  .copyfaq,
  .copyr2 {
    height: auto !important;
    margin-top: 0 !important;
  }

  .tx2,
  .tx2k,
  .tx3,
  .tx3k,
  .txa {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
  }

  /* velo oscuro para que el texto sobre video se lea */
  .fondor {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
    margin: 0 !important;
    background: rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-radius: 0;
  }

  .but35 {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }

  /* ---- 2.6 Tipografia fluida --------------------------------------------- */

  h1,
  .gran,
  .gran2 {
    font-size: clamp(28px, 6.2vw, 60px) !important;
    line-height: 1.15;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .txhola,
  .txhola0 {
    font-size: clamp(28px, 6.2vw, 60px) !important;
    padding: 0 !important;
    top: 0 !important;
  }

  h2,
  .tx5,
  .tela,
  .tx66 {
    font-size: clamp(22px, 4.2vw, 34px) !important;
    line-height: 1.25;
    margin: 0 0 16px !important;
    overflow-wrap: break-word;
  }

  h3 {
    font-size: clamp(19px, 3.4vw, 26px);
    line-height: 1.3;
  }

  h4 {
    font-size: clamp(17px, 2.8vw, 22px);
    line-height: 1.4;
  }

  p,
  li,
  .ampis2,
  .qsoy,
  .nomary {
    font-size: clamp(15px, 2.2vw, 19px);
    line-height: 1.6;
    overflow-wrap: break-word;
  }

  .nomary {
    top: auto !important;
    margin: 0 0 24px !important;
  }

  /* ---- 2.7 Formulario y popup de contacto -------------------------------- */

  /* el formulario estaba limitado a 400px y se veia estrecho en tablet */
  form {
    max-width: 100% !important;
    width: 100%;
  }

  input,
  select,
  textarea {
    max-width: 100%;
    width: 100%;
  }

  input[type="submit"] {
    width: auto !important;
    min-width: 200px;
    margin: 24px auto !important;
    padding: 16px 28px !important;
    display: block;
  }

  .popup-content {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: min(90vw, 520px) !important;
    margin: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   3. Ajustes finos para movil (<= 640px)
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {

  :root {
    --gut: 5vw;
  }

  .videocover {
    display: none !important;
  }

  .imgfondoz {
    display: block !important;
  }

  #semos.tx1 {
    bottom: 34%;
  }

  #bat.but1 {
    flex-direction: column;
    bottom: 6%;
  }

  .lin {
    width: 100%;
    max-width: 320px;
    text-align: center;
  }

  .rejilla333,
  .rejilla333a,
  .rejilla333m,
  .repo1,
  .repo2,
  .repo3,
  .repo4,
  .repo5,
  .repo6,
  .icontcase1 {
    grid-template-columns: 1fr !important;
  }

  .rejilla88 {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .awards-carousel .cli img {
    width: 90px;
  }

  .sesen {
    width: 50%;
  }
}

/* --------------------------------------------------------------------------
   4. Pagina 404 (enlazaba a css4/style.css, que no existe)
   -------------------------------------------------------------------------- */

body.fondonegro {
  background-color: #000;
  color: #fff;
  padding-top: 0;
}

body.fondonegro .whitetx {
  color: #fff;
}

body.fondonegro .err404logo {
  text-align: center;
  padding: 20px var(--gut);
}

body.fondonegro .err404logo img {
  max-width: 220px;
  height: auto;
  /* el PNG lleva el texto en negro y la 404 tiene fondo negro */
  background: #fff;
  border-radius: 12px;
  padding: 12px 16px;
}

body.fondonegro .err404 {
  font-size: clamp(80px, 22vw, 200px) !important;
  line-height: 1;
  text-align: center;
  margin: 10px 0;
}

body.fondonegro .resaltadosblog {
  text-align: center;
  font-size: clamp(20px, 4vw, 30px);
  margin: 0 0 20px;
}

body.fondonegro .err404tx {
  font-size: clamp(15px, 2.4vw, 20px);
  color: #fff;
  text-align: center;
  margin: 0 auto 24px;
  padding: 0 var(--gut);
  max-width: 780px;
}

body.fondonegro .err404link {
  text-align: center;
  font-size: clamp(14px, 2vw, 16px);
  padding: 0 var(--gut);
}

body.fondonegro .err404img {
  text-align: center;
  margin-top: 30px;
  padding: 0 var(--gut) 40px;
}

body.fondonegro .err404img img {
  max-width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   5. Escritorio (> 1280px): unico arreglo, sin tocar el diseno
   .contss  = width 50% + padding 30% + 32% = 112% del contenedor
   .cont2rr = width 40% + padding 50% + 20% = 110%
   El exceso es solo relleno vacio a la derecha, asi que reducirlo no mueve
   ni un pixel del texto y elimina el scroll horizontal fantasma.
   -------------------------------------------------------------------------- */

@media (min-width: 1281px) {

  .contss {
    padding-right: 20%;
  }

  .cont2rr {
    padding-right: 10%;
  }

  /* .rejilla333m pedia 5 columnas del 28% (=140% + separaciones), asi que la
     quinta tarjeta de "Creative Process" quedaba fuera de pantalla. */
  .rejilla333m {
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin: 4% 0;
  }

  /* su contenedor solo alberga esas tarjetas y reservaba un 45% de relleno
     derecho vacio; al liberarlo las columnas caben y el texto no se corta */
  .cont55gr {
    padding-left: 8%;
    padding-right: 8%;
  }
}