/* ============================================================
   AJUSTES sobre el diseño original
   Se carga al final: todo lo de acá pisa a los bloques.
   Para volver al tamaño original de un texto, borrar su línea.
   ============================================================ */

/* ---------- 1. Textos más grandes (pedido) ----------
   Solo textos de lectura, rótulos y botones; los títulos quedan igual.
   Original → nuevo (en escritorio) */
.tutte-nav-center a              { font-size: 0.82rem; }  /* 12.0 → 13.1 px */
.tutte-nav-cta                   { font-size: 0.8rem; }   /* 12.0 → 12.8 px */
.tutte-hero-eyebrow              { font-size: 0.8rem; }   /* 11.2 → 12.8 px */
.tutte-hero-sub                  { font-size: 1.2rem; max-width: 600px; } /* 16.8 → 19.2 px */
.tutte-hero-btn                  { font-size: 0.85rem; }  /* 12.8 → 13.6 px */
.tutte-massv-label               { font-size: 0.88rem; }  /* 12.8 → 14.1 px */
.tutte-massv-card p              { font-size: 1.1rem; }   /* 16.0 → 17.6 px */
.tutte-manifesto-label           { font-size: 0.8rem; }   /* 11.2 → 12.8 px */
.tutte-diff-label                { font-size: 0.8rem; }   /* 11.2 → 12.8 px */
.tutte-diff-tag                  { font-size: 0.72rem; }  /*  9.6 → 11.5 px */
.tutte-diff-card h3              { font-size: 1.15rem; }  /* 16.8 → 18.4 px */
.tutte-diff-card p               { font-size: 1rem; }     /* 13.6 → 16.0 px */
.tutte-proceso-label             { font-size: 0.8rem; }   /* 11.2 → 12.8 px */
.tutte-proceso-step h4           { font-size: 1.05rem; }  /* 15.2 → 16.8 px */
.tutte-proceso-step p            { font-size: 1rem; }     /* 13.6 → 16.0 px */
.tutte-clientes-label            { font-size: 0.88rem; }  /* 12.8 → 14.1 px */
.tutte-clientes-stat-label       { font-size: 1.08rem; }  /* 16.0 → 17.3 px */
.tutte-cta-tag                   { font-size: 0.82rem; }  /* 12.0 → 13.1 px */
.tutte-cta-btn                   { font-size: 0.85rem; }  /* 12.8 → 13.6 px */
.tutte-footer-email              { font-size: 0.9rem; }   /* 12.8 → 14.4 px */
.tutte-footer-right a            { font-size: 0.8rem; }   /* 11.2 → 12.8 px */
.tutte-footer-copy               { font-size: 0.78rem; }  /* 11.2 → 12.5 px */

@media (max-width: 900px) {
  .tutte-hero-sub                { font-size: 1.08rem; }  /* 15.2 → 17.3 px */
  .tutte-massv-card p            { font-size: 1.05rem; }
}
@media (max-width: 600px) {
  .tutte-hero-eyebrow            { font-size: 0.72rem; }  /*  9.6 → 11.5 px */
  .tutte-hero-sub                { font-size: 1.02rem; }  /* 14.4 → 16.3 px */
  .tutte-hero-btn                { font-size: 0.8rem; }
  .tutte-massv-label             { font-size: 0.8rem; }   /* 11.2 → 12.8 px */
  .tutte-massv-card p            { font-size: 1rem; }     /* 14.4 → 16.0 px */
  .tutte-manifesto-label,
  .tutte-diff-label,
  .tutte-proceso-label           { font-size: 0.74rem; }  /* 10.4 → 11.8 px */
  .tutte-diff-card p,
  .tutte-proceso-step p          { font-size: 0.95rem; }  /* 12.8 → 15.2 px */
  .tutte-cta-tag                 { font-size: 0.76rem; }
  .tutte-footer-right a,
  .tutte-footer-copy             { font-size: 0.74rem; }
}

/* ---------- 2. Margen lateral mínimo ----------
   En el original algunos textos quedaban pegados al borde izquierdo de la
   pantalla en escritorio (el contenedor de Elementor no tenía padding). */
@media (min-width: 768px) {
  .sec-massv .sec-inner,
  .sec-plataforma .sec-inner,
  .sec-proceso .sec-inner { padding-inline: clamp(24px, 4vw, 64px); }
}

/* ---------- 3. Tarjetas de Proceso con altura flexible ----------
   Tenían altura fija de 140px; con el texto más grande no entraba. */
.tutte-proceso-content { height: auto; min-height: 140px; }

/* ---------- 4. Videos de fondo (25/09) ----------
   Hero: reemplaza el canvas de cromo + objetos flotantes.
   Proceso ("Del brief a la recomendación"): reemplaza la textura metálica.
   Las capas oscuras se aclararon un poco para que el video se vea detrás del texto. */
.bg-video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; pointer-events: none; background: #000; }
.sec-hero::after { background: linear-gradient(141deg, rgba(0,0,0,.74) 30%, rgba(2,26,0,.42) 100%); }
.sec-proceso .bg-video { z-index: -1; }
html[data-version] .sec-proceso { background-image: none; background-color: #000; --overlay-opacity: .62; }

/* ---------- 5. Transiciones suaves entre secciones (25/09) ----------
   Todos los fondos se funden a negro arriba y abajo para que no se marque el corte.
   El degradé va como CAPA del mismo background (no como elemento encima) y arranca con
   4px de negro sólido: los cortes caen en medio píxel y la textura se asomaba como una línea. */
.bg-video { opacity: .6; }

/* Hero: video que se desvanece hacia abajo + capa oscura que termina en negro */
.sec-hero { background: #000; border-radius: 0; }
.sec-hero .bg-video {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
}
.sec-hero::after {
  background:
    linear-gradient(to bottom, rgba(0,0,0,0) 70%, #000 calc(100% - 4px), #000 100%),
    linear-gradient(141deg, rgba(0,0,0,.74) 30%, rgba(2,26,0,.42) 100%);
}
/* Franja de palabras debajo del hero: sin las líneas verdes arriba y abajo */
.tutte-marquee { border-top-color: transparent; border-bottom-color: transparent; }

/* Massvocacy: sin esquinas redondeadas y el brillo verde se apaga antes del borde */
.sec-massv {
  border-radius: 0;
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0) 72%, #000 calc(100% - 4px), #000 100%),
    linear-gradient(163deg, #000 78%, #010c00 100%);
}

/* Nosotros y Contacto: la textura pasa a un pseudo-elemento con máscara de degradé.
   (Como capa del fondo, Chrome dejaba ver una línea de 1px en la unión, sobre todo con
   background-attachment: fixed; con máscara el borde queda limpio. Se pierde el efecto fijo.) */
.sec-nosotros, .sec-contacto { background-image: none; background-color: #000; }
.sec-nosotros::after, .sec-contacto::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url('../img/textura-mercurio-liquido.webp') center / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
}
.sec-contacto::after { background-image: url('../img/textura-metal-2.webp'); }

/* Plataforma: el tono verde también se funde en los bordes */
.sec-plataforma {
  background-image:
    linear-gradient(to bottom, #000 0, #000 4px, rgba(0,0,0,0) 15%, rgba(0,0,0,0) 85%, #000 calc(100% - 4px), #000 100%),
    linear-gradient(295deg, #000 78%, #010c00 100%);
}

/* Proceso ("Del brief a la recomendación"): el video entra y sale en degradé */
.sec-proceso .bg-video {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 4px, #000 24%, #000 74%, transparent calc(100% - 4px));
          mask-image: linear-gradient(to bottom, transparent 0, transparent 4px, #000 24%, #000 74%, transparent calc(100% - 4px));
}

/* Sin las líneas de glitch que marcaban el comienzo de cada sección */
.glitch-seam { display: none; }