/* =========================================================
   GOTHAM SOLO PARA LA LANDING DE INDUSTRIAS
   ========================================================= */

@font-face {
  font-family: 'Gotham';
  src: url('../fonts/gotham/Gotham-Book.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gotham';
  src: url('../fonts/gotham/GOTHAM-MEDIUM.TTF') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gotham';
  src: url('../fonts/gotham/GOTHAM-BOLD.TTF') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* =========================================================
   ESCALA GLOBAL (CROSS-BROWSER) - 75%
   ========================================================= */

body.landing-zox-industrias .zrx-landing{
  --zrx-scale: 0.75;
}

/* =========================================================
   RESET/BASE (evita estilos raros del editor de WP)
   ========================================================= */

.zrx-landing,
.zrx-landing * {
  box-sizing: border-box;
}

.zrx-landing {
  font-family: 'Gotham', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background: #ffffff;
  color: #00243a;
  overflow-x: hidden;
}

.zrx-landing img {
  display: block;
  max-width: 100%;
}

.zrx-landing h1,
.zrx-landing h2,
.zrx-landing h3,
.zrx-landing p {
  margin: 0;
}

/* ======== CINTILLO SUPERIOR (si lo usas) ======== */
.zrx-strip {
  background: #0ab4dd;
  padding: calc(12px * var(--zrx-scale)) 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.zrx-strip__img {
  height: calc(52px * var(--zrx-scale));
  width: auto;
  display: block;
}

.zrx-container {
  max-width: calc(1200px * var(--zrx-scale));
  margin: 0 auto;
  padding: 0 calc(20px * var(--zrx-scale));
}

.zrx-section {
  padding: calc(60px * var(--zrx-scale)) 0;
}

/* =========================================================
   HERO INDUSTRIAS 
   ========================================================= */

body.landing-zox-industrias .zrx-hero-ind{
  background-color: #6cccdf;
  text-align: center;

  padding:
    calc(70px * var(--zrx-scale))
    calc(20px * var(--zrx-scale))
    calc(55px * var(--zrx-scale));

  min-height: calc(68vh * var(--zrx-scale));

  display: flex;
  align-items: center;
}

body.landing-zox-industrias .zrx-hero-ind__container{
  max-width: calc(1280px * var(--zrx-scale));
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  align-items: center;

  padding-left: calc(24px * var(--zrx-scale));
  padding-right: calc(24px * var(--zrx-scale));
}

body.landing-zox-industrias .zrx-hero-ind__logo{
  width: calc(190px * var(--zrx-scale));
  height: auto;
  margin-bottom: calc(40px * var(--zrx-scale));
}

body.landing-zox-industrias .zrx-hero-ind__tag{
  font-weight: 500;
  font-size: calc(30px * var(--zrx-scale));
  line-height: 1.2;
  opacity: 0.95;
  margin-bottom: calc(28px * var(--zrx-scale));
  color: #ffffff !important;
}

body.landing-zox-industrias .zrx-hero-ind__title{
  font-weight: 700;
  font-size: clamp(
    calc(34px * var(--zrx-scale)),
    calc(4.2vw * var(--zrx-scale)),
    calc(64px * var(--zrx-scale))
  );
  line-height: 1.06;
  max-width: calc(1200px * var(--zrx-scale));
  margin: 0 0 calc(26px * var(--zrx-scale)) 0;
  letter-spacing: calc(-0.3px * var(--zrx-scale));
  color: #ffffff !important;
}

body.landing-zox-industrias .zrx-hero-ind__text{
  font-weight: 500;
  font-size: clamp(
    calc(18px * var(--zrx-scale)),
    calc(1.7vw * var(--zrx-scale)),
    calc(32px * var(--zrx-scale))
  );
  line-height: 1.35;

  max-width: calc(1100px * var(--zrx-scale));
  margin: calc(20px * var(--zrx-scale)) 0 0;

  opacity: 0.95;
  color: #ffffff !important;
}

/* Mobile */
@media (max-width: 480px){
  body.landing-zox-industrias .zrx-hero-ind{
    padding:
      calc(56px * var(--zrx-scale))
      calc(18px * var(--zrx-scale))
      calc(44px * var(--zrx-scale));

    min-height: auto;
  }

  body.landing-zox-industrias .zrx-hero-ind__logo{
    width: calc(165px * var(--zrx-scale));
  }

  body.landing-zox-industrias .zrx-hero-ind__tag{
    font-size: calc(18px * var(--zrx-scale));
    margin-bottom: calc(22px * var(--zrx-scale));
  }

  body.landing-zox-industrias .zrx-hero-ind__text{
    margin-top: calc(20px * var(--zrx-scale));
    line-height: 1.4;
  }
}

/* =========================================================
   FULL WIDTH IMAGE SECTION (SIN RECORTE)
   ========================================================= */

.zrx-full-width-img-section{
  padding: 0;
  margin: 0;
  width: 100%;
  line-height: 0;
  background-color: #e0e0e0;
}

.zrx-full-width-img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* =========================================================
   BENEFICIOS - FIX WP <p> + 4 EN 1 FILA (MATCH FIGMA)
   ========================================================= */

body.landing-zox-industrias .zrx-benefits--figma{
  background: #fff;
  padding: calc(70px * var(--zrx-scale)) 0;
}

body.landing-zox-industrias .zrx-benefits--figma .zrx-container{
  max-width: calc(1400px * var(--zrx-scale));
  margin: 0 auto;
  padding-left: calc(24px * var(--zrx-scale));
  padding-right: calc(24px * var(--zrx-scale));
}

body.landing-zox-industrias .zrx-benefits-grid > p{
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.landing-zox-industrias .zrx-benefits-grid{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  column-gap: calc(90px * var(--zrx-scale));
  row-gap: 0;

  align-items: start;
  justify-items: center;
  text-align: center;

  margin: 0 !important;
  padding: 0 !important;
}

body.landing-zox-industrias .zrx-benefit{
  width: 100%;
  max-width: calc(320px * var(--zrx-scale));

  display: flex;
  flex-direction: column;
  align-items: center;

  margin: 0 !important;
  padding: 0 !important;
}

body.landing-zox-industrias .zrx-benefit__icon{
  width: calc(150px * var(--zrx-scale));
  height: auto;
  display: block;
  margin: 0 0 calc(18px * var(--zrx-scale));
}

body.landing-zox-industrias .zrx-benefit__title{
  margin: 0 !important;
  font-weight: 700;
  font-size: calc(26px * var(--zrx-scale));
  line-height: 1.2;
  color: #0ab4dd;
  max-width: calc(320px * var(--zrx-scale));
}

@media (max-width: 1100px){
  body.landing-zox-industrias .zrx-benefits-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    row-gap: calc(70px * var(--zrx-scale));
    column-gap: calc(60px * var(--zrx-scale));
  }
}

@media (max-width: 520px){
  body.landing-zox-industrias .zrx-benefits--figma{
    padding: calc(60px * var(--zrx-scale)) 0;
  }

  body.landing-zox-industrias .zrx-benefits-grid{
    grid-template-columns: 1fr !important;
    row-gap: calc(46px * var(--zrx-scale));
    column-gap: 0;
  }

  body.landing-zox-industrias .zrx-benefit__icon{
    width: calc(130px * var(--zrx-scale));
    margin-bottom: calc(16px * var(--zrx-scale));
  }

  body.landing-zox-industrias .zrx-benefit__title{
    font-size: calc(24px * var(--zrx-scale));
  }
}

/* =========================================================
   CASOS DE USO (FIGMA SPLIT)
   ========================================================= */

body.landing-zox-industrias .zrx-usecases{
  margin: 0;
  padding: 0;

  --tab-width: calc(620px * var(--zrx-scale));
  --tab-min-height: calc(82px * var(--zrx-scale));
  --tab-font-size: calc(20px * var(--zrx-scale));
  --tab-font-weight: 700;
}

body.landing-zox-industrias .zrx-usecases__wrap{
  display: flex;
  width: 100%;

  /* ✅ CAMBIO: solo un poquito más alto que 1130px */
  height: calc(1160px * var(--zrx-scale));
  max-height: calc(1160px * var(--zrx-scale));
}

body.landing-zox-industrias .zrx-usecases__media{
  flex: 0 0 58%;
  position: relative;
  overflow: hidden;
  background: #f2f2f2;
  height: 100%;
}

body.landing-zox-industrias .zrx-usecases__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: opacity .25s ease;
}

body.landing-zox-industrias .zrx-usecases__panel{
  flex: 0 0 42%;
  background: #6cccdf;
  padding: calc(44px * var(--zrx-scale)) calc(56px * var(--zrx-scale));

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  gap: calc(18px * var(--zrx-scale));
  height: 100%;
  box-sizing: border-box;
}

body.landing-zox-industrias .zrx-usecases__title{
  margin: 0 0 calc(60px * var(--zrx-scale)) 0;
  font-weight: 800;
  font-size: clamp(
    calc(38px * var(--zrx-scale)),
    calc(3.4vw * var(--zrx-scale)),
    calc(64px * var(--zrx-scale))
  );
  line-height: 1.05;
  color: #ffffff !important;
  text-align: center;
}

body.landing-zox-industrias .zrx-usecases__tabs{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: calc(16px * var(--zrx-scale));
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
}

/* =========================================================
   ✅ TABS: centrado vertical PERFECTO + permite <br>
   - NO escondemos br
   - Todo se centra por flex en el botón
   - El span es el bloque centrado
   ========================================================= */

body.landing-zox-industrias .zrx-usecases__tabs button.zrx-usecases__tab{
  all: unset !important;
  box-sizing: border-box !important;
  cursor: pointer !important;

  width: var(--tab-width) !important;
  max-width: 100% !important;

  /* pill */
  background: #ffffff !important;
  border-radius: 999px !important;

  /* centrado real */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* altura estable */
  min-height: var(--tab-min-height) !important;
  padding: calc(12px * var(--zrx-scale)) calc(26px * var(--zrx-scale)) !important;

  margin: 0 auto !important;
  text-align: center !important;

  /* evita herencias raras */
  line-height: normal !important;
}

/* el texto es el "bloque" centrado (multilínea OK) */
body.landing-zox-industrias .zrx-usecases__tabs button.zrx-usecases__tab .zrx-usecases__tab-text{
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;

  font-weight: var(--tab-font-weight) !important;
  font-size: var(--tab-font-size) !important;
  line-height: 1.15 !important;
  color: #0ab4dd !important;

  white-space: normal !important; /* wrap normal */
}

/* ✅ Asegura que el <br> NO esté oculto (por si quedó una regla vieja) */
body.landing-zox-industrias .zrx-usecases__tabs button.zrx-usecases__tab br{
  display: block !important; /* un br debe cortar línea */
  content: "" !important;
}

/* Hover/active */
body.landing-zox-industrias .zrx-usecases__tab.is-active,
body.landing-zox-industrias .zrx-usecases__tab:hover{
  transform: scale(1.01);
  box-shadow: 0 calc(10px * var(--zrx-scale)) calc(22px * var(--zrx-scale)) rgba(0,0,0,.10);
}

body.landing-zox-industrias .zrx-usecases__tab:focus-visible{
  outline: calc(3px * var(--zrx-scale)) solid rgba(255,255,255,.75);
  outline-offset: calc(4px * var(--zrx-scale));
}

/* =========================================================
   ✅ RESPONSIVE TABS (MEJORADO)
   - Mantiene la cápsula bonita
   - No se sale del panel en anchos medianos
   - En móviles reduce ancho / padding / fuente
   ========================================================= */

/* Tablets / laptops pequeñas */
@media (max-width: 1200px){
  body.landing-zox-industrias .zrx-usecases{
    --tab-width: min(100%, calc(520px * var(--zrx-scale)));
  }
}

/* Más ajuste para pantallas medianas */
@media (max-width: 1024px){
  body.landing-zox-industrias .zrx-usecases{
    --tab-width: min(100%, calc(460px * var(--zrx-scale)));
    --tab-font-size: calc(18px * var(--zrx-scale));
    --tab-min-height: calc(76px * var(--zrx-scale));
  }

  body.landing-zox-industrias .zrx-usecases__panel{
    padding: calc(38px * var(--zrx-scale)) calc(26px * var(--zrx-scale));
  }
}

/* Mobile (tu breakpoint actual) */
@media (max-width: 980px){
  body.landing-zox-industrias .zrx-usecases__wrap{
    flex-direction: column;
    height: auto;
    max-height: none;
  }

  body.landing-zox-industrias .zrx-usecases__media{
    height: calc(300px * var(--zrx-scale));
  }

  body.landing-zox-industrias .zrx-usecases__panel{
    height: auto;
    padding: calc(40px * var(--zrx-scale)) calc(22px * var(--zrx-scale));
    gap: calc(16px * var(--zrx-scale));
  }

  body.landing-zox-industrias .zrx-usecases__title{
    margin-bottom: calc(20px * var(--zrx-scale));
  }

  body.landing-zox-industrias .zrx-usecases{
    --tab-width: 100%;
    --tab-min-height: calc(68px * var(--zrx-scale));
    --tab-font-size: calc(18px * var(--zrx-scale));
  }

  body.landing-zox-industrias .zrx-usecases__tabs button.zrx-usecases__tab{
    width: 100% !important;
    padding: calc(12px * var(--zrx-scale)) calc(18px * var(--zrx-scale)) !important;
  }
}

/* Móviles chicos */
@media (max-width: 480px){
  body.landing-zox-industrias .zrx-usecases{
    --tab-font-size: calc(16px * var(--zrx-scale));
    --tab-min-height: calc(62px * var(--zrx-scale));
  }

  body.landing-zox-industrias .zrx-usecases__tabs{
    gap: calc(12px * var(--zrx-scale));
  }

  body.landing-zox-industrias .zrx-usecases__tabs button.zrx-usecases__tab{
    padding: calc(10px * var(--zrx-scale)) calc(14px * var(--zrx-scale)) !important;
  }

  body.landing-zox-industrias .zrx-usecases__tabs button.zrx-usecases__tab .zrx-usecases__tab-text{
    line-height: 1.2 !important;
  }
}

/* 4ta sección: subir encuadre de la imagen grande */
body.landing-zox-industrias .zrx-usecases__media img{
  object-position: center 80%;
}

/* =========================================================
   CTA FINAL
   ========================================================= */

body.landing-zox-industrias .zrx-cta-final{
  background: #ffffff;
  padding: calc(120px * var(--zrx-scale)) calc(20px * var(--zrx-scale));
}

body.landing-zox-industrias .zrx-cta-final__wrap{
  max-width: calc(1200px * var(--zrx-scale));
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
  gap: calc(40px * var(--zrx-scale));
}

body.landing-zox-industrias .zrx-cta-final__title{
  margin: 0;
  font-weight: 800;
  color: #0ab4dd;

  font-size: clamp(
    calc(44px * var(--zrx-scale)),
    calc(4.6vw * var(--zrx-scale)),
    calc(58px * var(--zrx-scale))
  );
  line-height: 1.05;

  max-width: calc(980px * var(--zrx-scale));
}

/* CTA final (centrado OK) */
body.landing-zox-industrias a.zrx-cta-final__btn{
  all: unset;
  box-sizing: border-box;
  cursor: pointer;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 999px;
  background: #ffffff;
  border: calc(2px * var(--zrx-scale)) solid #0ab4dd;
  color: #0ab4dd;

  min-height: calc(64px * var(--zrx-scale)); /* 48px real */
  padding: 0 calc(44px * var(--zrx-scale));

  font-weight: 700;
  font-size: calc(22px * var(--zrx-scale));
  line-height: 1 !important;

  text-decoration: none !important;
  white-space: nowrap !important;
}

body.landing-zox-industrias a.zrx-cta-final__btn p{
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.landing-zox-industrias a.zrx-cta-final__btn br{
  display: none !important;
}

body.landing-zox-industrias a.zrx-cta-final__btn::before,
body.landing-zox-industrias a.zrx-cta-final__btn::after{
  content: none !important;
  display: none !important;
}

body.landing-zox-industrias a.zrx-cta-final__btn:hover{
  transform: scale(1.02);
  box-shadow: 0 calc(10px * var(--zrx-scale)) calc(22px * var(--zrx-scale)) rgba(0,0,0,.10);
}

body.landing-zox-industrias a.zrx-cta-final__btn:focus-visible{
  outline: calc(3px * var(--zrx-scale)) solid rgba(10,180,221,.35);
  outline-offset: calc(5px * var(--zrx-scale));
}

@media (max-width: 768px){
  body.landing-zox-industrias .zrx-cta-final{
    padding: calc(80px * var(--zrx-scale)) calc(18px * var(--zrx-scale));
  }

  body.landing-zox-industrias .zrx-cta-final__wrap{
    gap: calc(22px * var(--zrx-scale));
  }

  body.landing-zox-industrias a.zrx-cta-final__btn{
    min-height: calc(56px * var(--zrx-scale));
    padding: 0 calc(34px * var(--zrx-scale));
    font-size: calc(18px * var(--zrx-scale));
  }
}

/* =========================================================
   CASOS DE USO - HOVER SWAP (solo al pasar el cursor)
   Fondo = color del texto / Texto = color del fondo
   ========================================================= */

/* Transiciones suaves */
body.landing-zox-industrias .zrx-usecases__tabs button.zrx-usecases__tab{
  transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}

body.landing-zox-industrias .zrx-usecases__tabs button.zrx-usecases__tab .zrx-usecases__tab-text{
  transition: color .18s ease !important;
}

/* ✅ HOVER: intercambio de colores */
body.landing-zox-industrias .zrx-usecases__tabs button.zrx-usecases__tab:hover{
  background-color: #0ab4dd !important; /* antes texto */
  transform: translateY(calc(-2px * var(--zrx-scale)));
  box-shadow: 0 calc(12px * var(--zrx-scale)) calc(26px * var(--zrx-scale)) rgba(0,0,0,.14);
}

body.landing-zox-industrias .zrx-usecases__tabs button.zrx-usecases__tab:hover .zrx-usecases__tab-text{
  color: #ffffff !important; /* antes fondo */
}

/* ✅ Mobile: evita hover pegado */
@media (max-width: 980px){
  body.landing-zox-industrias .zrx-usecases__tabs button.zrx-usecases__tab:hover{
    transform: none;
    box-shadow: none;
  }
}

/* =========================================================
   ✅ CASOS DE USO - FIX MOBILE
   1) Cambio de imagen más rápido
   2) Botones al mismo ancho (100%)
   ========================================================= */

@media (max-width: 980px){

  /* 1) Reduce la "sensación" de demora al cambiar imagen */
  body.landing-zox-industrias .zrx-usecases__media img{
    transition: opacity .12s ease !important; /* antes .25s */
  }

  /* 2) Misma anchura real para todos los botones */
  body.landing-zox-industrias .zrx-usecases__tabs{
    align-items: stretch !important; /* en vez de center */
    width: 100% !important;
  }

  body.landing-zox-industrias .zrx-usecases__tabs button.zrx-usecases__tab{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;            /* quita "centrado" que a veces crea diferencias */
  }
}

/* =========================================================
   ✅ FIX: Forzar GOTHAM en TODOS los textos de los botones (Use cases)
   ========================================================= */

body.landing-zox-industrias .zrx-usecases__tabs button.zrx-usecases__tab,
body.landing-zox-industrias .zrx-usecases__tabs button.zrx-usecases__tab .zrx-usecases__tab-text,
body.landing-zox-industrias .zrx-usecases__tabs button.zrx-usecases__tab *{
  font-family: 'Gotham', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* ✅ Solo esta landing (Senior): bajar encuadre de la imagen */
#zrx-usecases-senior .zrx-usecases__media img{
  object-position: center 40% !important; /* prueba 85%–98% */
}

/* =========================================================
   ✅ iPhone: sin barras (cover) + menos corte del robot
   - Fuerza un alto consistente en mobile usando aspect-ratio
   - Mantiene cover para que NO salgan barras
   - Baja el encuadre (object-position) para ver más el robot
   ========================================================= */

@supports (-webkit-touch-callout: none) {
  @media (max-width: 980px){

    body.landing-zox-industrias .zrx-usecases__media{
      height: auto !important;
      aspect-ratio: 4 / 3;       /* prueba 16/9 si lo quieres más “banner” */
      background: #f2f2f2 !important;
      overflow: hidden !important;
    }

    body.landing-zox-industrias .zrx-usecases__media img{
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;        /* ✅ NO barras */
      object-position: center 70% !important; /* ✅ baja el encuadre (ajusta 60%–85%) */
      -webkit-transform: translateZ(0);    /* ayuda iOS a renderizar mejor */
    }
  }
}