/* =========================================================
   wopi – Página de INICIO
   Se carga después de styles.css. Las medidas usan --m
   (1px de la maqueta, ya al 85%), definida en styles.css.
   ========================================================= */

/* =========================================================
   1. HERO
   ========================================================= */
.in-hero {
  position: relative;
  z-index: 3;                       /* el video baja sobre el bloque siguiente */
  background: var(--azul);
}

/* Redes caladas al fondo, cortadas por el borde derecho */
.in-hero__redes {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.in-hero__redes p {
  position: absolute;
  top: calc(14 * var(--m));
  left: calc(50% + 300 * var(--m));
  margin: 0;
  font-family: var(--font-titulos);
  font-size: calc(48 * var(--m));
  line-height: calc(47 * var(--m));
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: max(1px, calc(1.3 * var(--m))) rgba(255, 255, 255, .75);
}

.in-hero__wrap { min-height: calc(265 * var(--m)); }

.in-hero__texto {
  position: relative;
  padding: calc(142 * var(--m)) 0 calc(40 * var(--m)) calc(111 * var(--m));
}

/* Franja inclinada: celeste + negra, llega hasta el borde izquierdo de la pantalla */
.franja {
  position: absolute;
  top: calc(30 * var(--m));
  right: calc(100% - 488 * var(--m));
  width: calc(488 * var(--m) + 50vw);
  margin: 0;
  display: flex;
  flex-direction: column;
  font-weight: 400;
  text-align: right;
  transform: rotate(-4.7deg);
  transform-origin: 100% 0;
}
.franja__chica {
  display: block;
  padding-right: calc(176 * var(--m));
  font-family: var(--font-texto);
  font-weight: 600;
  font-size: calc(11.5 * var(--m));
  line-height: calc(20 * var(--m));
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blanco);
  background: var(--celeste);
}
.franja__grande {
  display: block;
  padding-right: calc(110 * var(--m));
  font-family: var(--font-titulos);
  font-size: calc(31 * var(--m));
  line-height: calc(44 * var(--m));
  text-transform: uppercase;
  color: var(--blanco);
  background: var(--negro);
}

.in-hero__bajada {
  margin: 0 0 calc(18 * var(--m));
  font-size: max(14px, calc(13.5 * var(--m)));
  font-weight: 600;
  line-height: 1.3;
  color: var(--blanco);
}

/* Video con botón de play */
.in-video {
  position: absolute;
  z-index: 2;
  left: calc(488 * var(--m));
  top: calc(27 * var(--m));
  width: calc(384 * var(--m));
  display: block;
}
.in-video__img { width: 100%; }
.in-video__play {
  position: absolute;
  left: 50%;
  top: 46%;
  width: calc(118 * var(--m));
  transform: translate(-50%, -50%);
  transition: transform .25s ease;
}
.in-video:hover .in-video__play,
.in-video:focus-visible .in-video__play { transform: translate(-50%, -50%) scale(1.1); }
.in-video:focus-visible { outline: 3px dashed var(--blanco); outline-offset: 6px; }

/* =========================================================
   2. CAMPAÑAS + CASOS DE ÉXITO
   ========================================================= */
.in-campanas {
  position: relative;
  z-index: 2;
  /* Izquierda salmón con trama · derecha amarillo → celeste */
  background: var(--salmon);
}
.in-campanas::before {               /* trama cubriendo toda la columna salmón */
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: calc(50% + 95 * var(--m));
  background: url("../img/trama-fondo.png") center / cover no-repeat;
}
.in-campanas::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; right: 0;
  left: calc(50% + 95 * var(--m));
  background: radial-gradient(ellipse 70% 80% at 100% 100%, var(--celeste) 0%, #b9d49b 35%, var(--amarillo) 70%);
}
.in-campanas__wrap { z-index: 1; min-height: calc(250 * var(--m)); }

.in-campanas__caja {
  position: absolute;
  left: calc(145 * var(--m));
  top: calc(67 * var(--m));
  width: calc(287 * var(--m));
  margin: 0;
  padding: calc(14 * var(--m)) calc(16 * var(--m));
  font-size: max(12px, calc(11 * var(--m)));
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  background: var(--blanco);
  border: max(2px, calc(2.5 * var(--m))) solid var(--negro);
  box-shadow: calc(7 * var(--m)) calc(7 * var(--m)) 0 var(--negro);
}
.in-campanas__caja strong { font-weight: 700; }

.in-campanas__estrella {
  position: absolute;
  z-index: 1;
  left: calc(85 * var(--m));
  top: calc(140 * var(--m));
  width: calc(85 * var(--m));
  animation: girar 40s linear infinite;
}

.in-casos {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  left: calc(575 * var(--m));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-titulos);
  font-size: calc(34 * var(--m));
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--negro);
  transition: transform .25s ease;
}
.in-casos:hover,
.in-casos:focus-visible { transform: scale(1.05); outline: none; }
.in-casos__contorno { color: transparent; -webkit-text-stroke: max(1px, calc(1.3 * var(--m))) var(--negro); }
.in-casos__de { text-transform: none; }
.in-casos__exito { position: relative; }
.in-casos__puntero {
  position: absolute;
  right: calc(-40 * var(--m));
  bottom: calc(-18 * var(--m));
  width: calc(30 * var(--m));
  animation: clic 2.4s ease-in-out infinite;
}
@keyframes clic {
  0%, 70%, 100% { transform: translate(0, 0); }
  80% { transform: translate(-3px, -3px) scale(.92); }
}

/* =========================================================
   3. EXPERTOS EN REDES
   ========================================================= */
.in-expertos {
  position: relative;
  z-index: 2;                       /* el sticker baja sobre el celeste */
  background: #0d0d0d url("../img/fondo-textura-negro.jpg") center / cover;
  color: var(--blanco);
}
.in-expertos__wrap { min-height: calc(210 * var(--m)); }

.in-expertos__texto { padding: calc(45 * var(--m)) 0 calc(30 * var(--m)) calc(111 * var(--m)); }
.in-expertos__bajada {
  margin: 0 0 calc(12 * var(--m));
  font-size: max(12px, calc(11 * var(--m)));
  font-weight: 600;
  line-height: 1.25;
}
.in-expertos__titulo {
  margin: 0;
  font-family: var(--font-titulos);
  font-weight: 400;
  font-size: calc(34 * var(--m));
  line-height: 1;
  text-transform: uppercase;
}
.in-minus { text-transform: none; }
.in-expertos__wa { display: inline-block; margin-top: calc(14 * var(--m)); transition: transform .2s ease; }
.in-expertos__wa img { width: max(38px, calc(36 * var(--m))); }
.in-expertos__wa:hover { transform: rotate(-8deg) scale(1.1); }

.like--grande { left: calc(696 * var(--m)); top: calc(52 * var(--m));  font-size: calc(30 * var(--m)); }
.like--chico  { left: calc(608 * var(--m)); top: calc(115 * var(--m)); font-size: calc(16.5 * var(--m)); animation-delay: -1.5s; }
.like--medio  { left: calc(803 * var(--m)); top: calc(130 * var(--m)); font-size: calc(20 * var(--m)); animation-delay: -3s; }

.in-expertos__sticker {
  position: absolute;
  z-index: 2;
  left: calc(413 * var(--m));
  top: calc(155 * var(--m));
  width: calc(135 * var(--m));
  animation: latir 3s ease-in-out infinite;
}
@keyframes latir {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50%      { transform: scale(1.05) rotate(-3deg); }
}

/* =========================================================
   4. CAPTÁ · CONECTÁ · VENDÉ + CONTACTO
   ========================================================= */
.in-capta { --cel-w: calc(344 * var(--m)); }   /* ancho del celular */

.in-capta__wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Parte celeste: termina en la mitad del celular */
.in-capta__arriba {
  position: relative;
  z-index: 1;
  background: var(--celeste);
  padding-top: calc(75 * var(--m));
}
.in-capta__titulo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 calc(24 * var(--m));
  margin: 0 0 calc(30 * var(--m));
  font-family: var(--font-titulos);
  font-weight: 400;
  font-size: calc(44 * var(--m));
  line-height: 1.15;
  color: var(--blanco);
  text-shadow: calc(3 * var(--m)) calc(3 * var(--m)) 0 var(--negro);
}
.in-capta__titulo span { white-space: nowrap; }

.in-capta__celular {
  position: relative;
  z-index: 2;
  width: var(--cel-w);
  margin-bottom: calc(var(--cel-w) * -254 / 515 / 2);   /* la mitad del celular queda sobre el degradé */
}

.in-capta__estrella {
  position: absolute;
  z-index: 0;
  right: calc(-58 * var(--m));
  bottom: calc(-110 * var(--m));
  width: calc(150 * var(--m));
  animation: girar 50s linear infinite;
}

.in-capta__trama {
  position: absolute;
  pointer-events: none;
  background: url("../img/trama-fondo.png") right top / calc(598 * var(--m)) auto no-repeat;
}
.in-capta__trama--arriba { left: 0; top: calc(10 * var(--m)); width: calc(95 * var(--m)); height: calc(160 * var(--m)); }
.in-capta__trama--abajo  { left: 0; bottom: 0; width: calc(165 * var(--m)); height: calc(190 * var(--m)); background-position: right bottom; }

/* Parte con degradé */
.in-capta__abajo {
  position: relative;
  padding-bottom: calc(60 * var(--m));
  background: var(--salmon) radial-gradient(ellipse 55% 70% at 100% 100%,
              var(--azul) 0%, #9a5fc4 35%, #d4568e 68%, var(--salmon) 100%);
}

.in-capta__caja {
  position: relative;
  z-index: 3;
  width: calc(283 * var(--m));
  margin: calc(var(--cel-w) * 254 / 515 / 2 - 17 * var(--m)) 0 0;   /* se monta sobre el borde del celular */
  padding: calc(9 * var(--m)) calc(10 * var(--m));
  font-size: max(12px, calc(11 * var(--m)));
  font-weight: 600;
  line-height: 1.3;
  background: var(--blanco);
  border: max(2px, calc(2.5 * var(--m))) solid var(--negro);
  box-shadow: calc(7 * var(--m)) calc(7 * var(--m)) 0 var(--negro);
}

.in-capta__abajo .boton-verde { margin-top: calc(25 * var(--m)); }
.in-capta__contactos { margin-top: calc(62 * var(--m)); }

/* =========================================================
   MÓVIL Y TABLET CHICA (≤ 820px)
   ========================================================= */
@media (max-width: 820px) {
  .in-wrap { width: 100%; }

  /* 1. Hero */
  .in-hero__wrap { min-height: 0; padding: 0 0 0; }
  .in-hero__redes p { top: 14px; left: calc(100% - 120px); font-size: 52px; line-height: 52px; -webkit-text-stroke-width: 1.2px; opacity: .5; }
  .in-hero__texto { padding: 34px 20px 0; text-align: center; }
  .franja {
    position: relative;
    top: auto; right: auto;
    width: calc(100% + 80px);
    margin: 10px 0 34px -40px;
    text-align: center;
    transform: rotate(-4deg);
    transform-origin: 50% 50%;
  }
  .franja__chica  { padding: 3px 0; font-size: 12px; line-height: 1.3; }
  .franja__grande { padding: 4px 0 6px; font-size: min(30px, 8vw); line-height: 1.2; }
  .in-hero__bajada { font-size: 15px; margin-bottom: 20px; }
  .boton-wa--chico { --bw-fs: 18px; --bw-alto: calc(18px * 1.2 + 10px); gap: 8px; }
  .boton-wa--chico .boton-wa__texto { padding: 3px 12px; box-shadow: 4px 4px 0 var(--negro); }
  .in-video {
    position: relative;
    left: auto; top: auto;
    width: min(88%, 460px);
    margin: 30px auto -70px;
  }
  .in-video__play { width: 26%; }

  /* 2. Campañas + casos */
  .in-campanas { background: none; }
  .in-campanas::before, .in-campanas::after { display: none; }
  .in-campanas__wrap { min-height: 0; }
  .in-campanas__izq {
    position: relative;
    padding: 100px 24px 54px;
    background: url("../img/trama-fondo.png") center / 598px auto, var(--salmon);
  }
  .in-campanas__caja { position: relative; left: auto; top: auto; width: auto; max-width: 340px; margin: 0 auto; padding: 16px 18px; font-size: 14px; box-shadow: 6px 6px 0 var(--negro); }
  .in-campanas__estrella { left: 6px; top: auto; bottom: 22px; width: 76px; }
  .in-casos {
    position: relative;
    left: auto; top: auto; right: auto; bottom: auto;
    padding: 46px 20px 52px;
    font-size: 34px;
    background: radial-gradient(ellipse 80% 90% at 100% 100%, var(--celeste) 0%, #b9d49b 35%, var(--amarillo) 70%);
  }
  .in-casos__contorno { -webkit-text-stroke-width: 1.3px; }
  .in-casos__puntero { width: 30px; right: -38px; bottom: -16px; }

  /* 3. Expertos */
  .in-expertos__wrap { min-height: 0; padding-bottom: 100px; }
  .in-expertos__texto { padding: 48px 20px 10px; text-align: center; }
  .in-expertos__bajada { font-size: 14px; }
  .in-expertos__titulo { font-size: min(34px, 9vw); }
  .in-expertos__wa img { width: 42px; }
  .likes { position: relative; width: 300px; height: 140px; margin: 10px auto 0; }
  .like--grande { left: 80px; top: 6px;  font-size: 28px; }
  .like--chico  { left: 0;    top: 76px; font-size: 17px; }
  .like--medio  { left: 188px; top: 86px; font-size: 20px; }
  .in-expertos__sticker { left: 50%; top: auto; bottom: -48px; width: 130px; margin-left: -65px; }

  /* 4. Captá */
  .in-capta { --cel-w: min(330px, 86vw); }
  .in-capta__arriba { padding-top: 76px; }
  .in-capta__titulo { gap: 0 14px; margin-bottom: 24px; padding: 0 12px; font-size: min(32px, 8.6vw); text-shadow: 3px 3px 0 var(--negro); }
  .in-capta__estrella { right: -40px; bottom: -70px; width: 100px; }
  .in-capta__trama--arriba { width: 80px; height: 120px; }
  .in-capta__caja { width: min(300px, 84vw); margin-top: calc(var(--cel-w) * 254 / 515 / 2 - 14px); padding: 10px 12px; font-size: 13px; box-shadow: 6px 6px 0 var(--negro); }
  .in-capta__abajo { padding-bottom: 50px; }
  .in-capta__abajo .boton-verde { margin-top: 26px; font-size: 20px; padding: 5px 18px 7px; box-shadow: 5px 5px 0 var(--negro); }
  .in-capta__contactos { margin-top: 46px; }
}