/* =========================================================================
   Portada (/) · WordPress wp-page#55651 (post-55651.css), medida a 1440, 1024 y 390 px el 26-09-2026.
   Clases con prefijo portada-. Las tarjetas del equipo van en equipo-tarjetas.css.
   ========================================================================= */

/* Roboto Serif se pinta en WordPress con tamaño óptico 14 a cualquier tamaño (como en sobre-nosotros.css). */
.pagina-portada #contenido { font-variation-settings: 'opsz' 14; }

.portada {
  --portada-hueco: 150px;      /* margen inferior de cada sección */
  --portada-cabeza: 80px;      /* de la cabecera de sección a su contenido */
  overflow-x: clip;
}
@media (max-width: 1180px) { .portada { --portada-hueco: 100px; --portada-cabeza: 70px; } }
@media (max-width: 767px) { .portada { --portada-hueco: 80px; --portada-cabeza: 60px; } }

.portada-ancho { width: min(100% - 2 * var(--margen), 1280px); margin-inline: auto; }

.portada-glifo { display: block; width: 1em; height: 1em; }

/* Apariciones de la web: «pop-in» (escala) y fundido sin desplazamiento. El movimiento reducido lo anula base.css. */
.js .portada [data-aparece="pop"]:not(.visible) { transform: scale(0.75); }

/* Botones: en WordPress se desplazan 5 px a la derecha al pasar el ratón y la flecha (un glifo de 12 px) ocupa
   los 12 px enteros. La flecha común deja 3 px de aire por lado: a 18 px con -3 px de margen mide lo mismo. */
.portada .boton { transition: background var(--transicion), color var(--transicion), border-color var(--transicion), box-shadow var(--transicion), transform 0.4s; }
.portada .boton:hover { transform: translateX(5px); }

/* Efecto de opacidad ligado al scroll (portada.js fija --portada-opacidad; sin JS vale 1) */
.js [data-portada-opacidad] { filter: opacity(var(--portada-opacidad, 1)); }

/* ---------- Píldora y cabecera de sección ---------- */
.etiqueta.portada-etiqueta {
  padding: 4px 15px;
  border-radius: 30px;
  font-size: var(--t-h6);
  line-height: 1.65;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.portada-cabeza {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  width: min(100%, 680px);
  margin-inline: auto;
  text-align: center;
}
.portada-cabeza__titulo { font-size: var(--t-h2); line-height: 1.1; letter-spacing: -2px; }
.portada-cabeza__texto { margin: 0; }
@media (max-width: 1180px) {
  .portada-cabeza--competitiva { width: min(100%, 740px); }
}

/* =========================================================================
   Hero: la barra de navegación va superpuesta (como en WordPress); el hueco superior la incluye.
   El fondo se dimensiona como en WordPress, donde la sección era más alta por la fila de logos del demo
   (1857 px a 1440). Sin esa fila, el hueco inferior va dentro del hero para que el fondo no se corte en seco,
   y los últimos 80 px funden con el color de la página. El vídeo de la plantilla se quitó el 30-09-2026 (Jero).
   ========================================================================= */
.portada-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 150px;
  padding: 260px var(--margen) var(--portada-hueco);
  background-image: linear-gradient(to bottom, rgba(246, 245, 243, 0) calc(100% - 80px), var(--c-fondo)), url('/assets/img/portada-hero-fondo.webp');
  background-repeat: no-repeat;
  background-position: 0 0, top center;
  background-size: 100% 100%, max(100%, 1876px) auto;
}
.portada-hero__contenido {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  width: min(100%, 650px);
  text-align: center;
}

/* Píldora «NEXT-GEN · Marketing + Tecnología Punta + IA conversacional…» */
.portada-hero__pildora {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 761px;
  max-width: calc(100vw - 2 * var(--margen));
  margin-bottom: -10px;
  padding: 4px 10px 5px 6px;
  border-radius: 30px;
  background: var(--c-superficie);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.portada-hero__nextgen {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 30px;
  background: var(--c-grafito);
  color: var(--c-fondo);
  font-size: var(--t-etiqueta);
  font-weight: 700;
  line-height: 1.55;
  text-transform: uppercase;
}
.portada-hero__nextgen-icono { width: 15px; height: 15px; }
.portada-hero__lema {
  margin: 0;
  font-family: var(--f-titulos);
  font-size: var(--t-h6);
  line-height: 1.65;
  color: var(--c-grafito);
}

.portada-hero__titulo { width: 100%; }
.portada-hero__texto {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--c-grafito);
}

/* Caras de clientes y «Negocios que ya crecen con Viraltia» */
.portada-hero__clientes { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }
.portada-hero__caras { display: flex; align-items: center; }
.portada-hero__cara { position: relative; display: block; }
.portada-hero__cara img { width: 50px; height: 50px; border: 3px solid var(--c-fondo); border-radius: 50%; }
.portada-hero__cara + .portada-hero__cara { margin-left: -10px; }
.portada-hero__cara:first-child img { width: 47px; height: 47px; border-width: 1px; }
.portada-hero__prueba {
  margin: 0;
  padding: 10px;
  font-size: var(--t-pequeno);
  line-height: 1.55;
  color: var(--c-apagado);
}
.portada-hero__botones { gap: 20px; }

/* ---------- Manifiesto ---------- */
.portada-manifiesto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  width: min(100% - 2 * var(--margen), 800px);
  margin: 0 auto 100px;
  text-align: center;
}
.portada-manifiesto__texto {
  margin: 0;
  font-family: var(--f-titulos);
  font-size: var(--t-h3);
  line-height: 1.15;
  letter-spacing: -1px;
  color: var(--c-grafito);
}
.portada-manifiesto__frase { display: block; }

/* ---------- Cuatro ventajas con la forma 3D ---------- */
.portada-ventajas {
  display: flex;
  align-items: center;
  gap: 80px;
  margin-bottom: var(--portada-hueco);
}
.portada-ventajas__imagen,
.portada-ventajas__rejilla { flex: 1 1 0; min-width: 0; }
.portada-ventajas__imagen { display: flex; justify-content: center; }
.portada-ventajas__forma { width: 100%; transform-origin: center; }
.portada-ventajas__rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; }
.portada-ventaja {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 60px 60px 60px 0;
  border: 0 solid var(--c-borde);
}
.portada-ventaja:nth-child(1) { border-width: 0 1px 1px 0; }
.portada-ventaja:nth-child(2) { border-width: 0 0 1px 0; padding: 60px 0 60px 60px; }
.portada-ventaja:nth-child(3) { border-width: 0 1px 0 0; }
.portada-ventaja:nth-child(4) { padding: 60px 0 60px 60px; }
.portada-ventaja__icono { font-size: 48px; color: var(--c-arena); }
.portada-ventaja__titulo {
  margin: 0 0 -15px;  /* el gap de 30 px es para el icono; título y texto van a 15 px */
  font-size: var(--t-h4);
  line-height: 1.25;
  letter-spacing: -1px;
}
.portada-ventaja__texto { margin: 0; }

@media (max-width: 1180px) {
  .portada-ventajas { flex-direction: column-reverse; gap: 20px; }
  .portada-ventajas__imagen, .portada-ventajas__rejilla { flex: none; width: 100%; }
  .portada-ventajas__forma { width: 80%; }
}
@media (max-width: 767px) {
  .portada-ventajas { gap: 50px; }
  /* Como en WordPress: las dos primeras filas miden lo mismo (1fr) y cada ventaja va centrada en la suya */
  .portada-ventajas__rejilla { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(2, 1fr); grid-auto-rows: auto; align-items: center; gap: 30px; padding: 0 20px; }
  .portada-ventaja,
  .portada-ventaja:nth-child(n) { align-items: center; padding: 0 0 40px; border-width: 0 0 1px; text-align: center; }
  .portada-ventaja:nth-child(4) { padding: 0; border-width: 0; }
  .portada-ventaja__icono { font-size: 42px; }
}

/* ---------- Servicios ---------- */
.portada-servicios {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--portada-cabeza);
  margin-bottom: var(--portada-hueco);
}
.portada-servicios__rejilla {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 40px;
  width: 100%;
}
.portada-servicio {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 60px 40px;
  border: 1px solid var(--c-borde);
  border-radius: var(--radio);
  background: var(--c-superficie) center right / cover no-repeat;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.js .portada-servicio[data-aparece] {
  transition: opacity 0.9s ease var(--retraso, 0s), transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) var(--retraso, 0s),
    border-color var(--transicion), box-shadow var(--transicion);
}
/* En WordPress todas las tarjetas se iluminan al pasar el ratón, también la de Reactivación (sin enlace) */
.portada-servicio:hover,
.portada-servicio--enlace:focus-visible { border-color: var(--c-primario); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); }
.portada-servicio--enlace:focus-visible { border-radius: var(--radio); }  /* base.css pone 4 px al foco */
.portada-servicio--fondo-2 { background-image: url('/assets/img/portada-servicio-fondo-2.webp'); }
.portada-servicio--fondo-3 { background-image: url('/assets/img/portada-servicio-fondo-3.webp'); }
.portada-servicio--fondo-4 { background-image: url('/assets/img/portada-servicio-fondo-4.webp'); }
.portada-servicio--fondo-5 { background-image: url('/assets/img/portada-servicio-fondo-5.webp'); }
.portada-servicio--fondo-6 { background-image: url('/assets/img/portada-servicio-fondo-6.webp'); }
.portada-servicio__icono {
  display: block;
  margin-bottom: 30px;
  padding: 21px 22px;
  border-radius: 50%;
  background: var(--c-fondo);
  box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.2);
  font-size: 28px;
  color: var(--c-arena);
}
.portada-servicio__titulo {
  margin-bottom: 20px;
  font-size: var(--t-h4);
  line-height: 1.25;
  letter-spacing: -1px;
}
.portada-servicio__texto { margin: 0; color: var(--c-texto); }

/* «Listo para innovar?» + botón */
.portada-listo { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 40px; }
.portada-listo__texto {
  margin: 0;
  font-family: var(--f-titulos);
  font-size: var(--t-h5);
  line-height: 1.35;
  letter-spacing: -1px;
  color: var(--c-grafito);
}

@media (max-width: 1180px) {
  .portada-servicios__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
}
@media (max-width: 767px) {
  .portada-servicios__rejilla { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .portada-servicio { align-items: center; padding: 40px 30px; text-align: center; }
  .portada-servicio__icono { font-size: 24px; }
  .portada-listo { flex-direction: column; gap: 30px; }
}

/* ---------- Ventaja competitiva: bloques grandes ---------- */
.portada-competitiva {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--portada-cabeza);
  margin-bottom: var(--portada-hueco);
}
.portada-bloques { display: flex; flex-direction: column; gap: 40px; width: 100%; }
.portada-bloques__fila { display: flex; align-items: stretch; gap: 40px; }
.portada-bloque {
  min-width: 0;
  border: 1px solid var(--c-borde);
  border-radius: var(--radio);
  background: var(--c-superficie);
}
/* Anchos de WordPress: 35 % y 65 % de la fila sin el hueco (434 y 806 px a 1440) */
.portada-bloque--estrecho { flex: 0 0 calc((100% - 40px) * 0.35); }
.portada-bloque--ancho { flex: 0 0 calc((100% - 40px) * 0.65); }
.portada-bloque__titulo { font-size: var(--t-h4); line-height: 1.25; letter-spacing: -1px; }

/* Con foto arriba (Agendamiento, Integraciones) */
.portada-bloque--foto { display: flex; flex-direction: column; padding: 40px; }
.portada-bloque__foto { margin-bottom: 40px; overflow: hidden; border-radius: var(--radio); }
.portada-bloque__foto img { width: 100%; border-radius: var(--radio); }
.portada-bloque__foto--fija { height: 305px; }
.portada-bloque__foto--fija img { height: 100%; object-fit: cover; }
.portada-bloque--foto .portada-bloque__titulo { margin-bottom: 10px; }
.portada-bloque__texto { margin: 0; }

/* Con panel pegado abajo a la derecha (WaFloW.ai, Súper Agentes) */
.portada-bloque--panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  min-height: 500px;
  padding: 40px 0 0 40px;
  overflow: hidden;
  background: var(--c-superficie) center / cover no-repeat;
}
.portada-bloque--fondo-1 { background-image: url('/assets/img/portada-tarjeta-fondo-1.webp'); }
.portada-bloque--fondo-2 { background-image: url('/assets/img/portada-tarjeta-fondo-2.webp'); }
.portada-bloque__cabeza { display: flex; flex-direction: column; gap: 10px; padding-right: 40px; }
.portada-bloque__lema { margin: 0; line-height: 1; }
.portada-bloque__panel { align-self: flex-end; }

@media (max-width: 1180px) {
  .portada-bloques { gap: 30px; }
  .portada-bloques__fila { flex-direction: column; gap: 30px; }
  .portada-bloque--estrecho, .portada-bloque--ancho { flex: none; }
  .portada-bloque__foto--fija { height: 340px; margin-bottom: 30px; }  /* Integraciones sigue a 40 px */
  .portada-bloque--panel { min-height: 470px; }
}
@media (max-width: 767px) {
  .portada-bloque--foto { padding: 30px; text-align: center; }
  .portada-bloque__foto { margin-bottom: 30px; }
  .portada-bloque__foto--fija { height: 200px; }
  .portada-bloque--panel { gap: 30px; min-height: 0; padding: 30px 0 0 30px; }
  .portada-bloque__cabeza { padding-right: 30px; text-align: center; }
}

/* ---------- Lema: «… — en un solo sistema.» ---------- */
.portada-lema {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: var(--portada-hueco);
  padding-left: 70px;
}
.portada-lema__icono {
  position: absolute;
  top: 24px;
  left: 10px;
  font-size: 55px;
  color: var(--c-primario);
}
.portada-lema__icono .portada-glifo { width: auto; aspect-ratio: 812 / 1024; }
.portada-lema__texto {
  margin: 0;
  font-family: var(--f-titulos);
  font-size: var(--t-h3);
  line-height: 1.15;
  letter-spacing: -1px;
  color: var(--c-grafito);
  text-align: center;
}
.portada-lema__rota {
  display: inline-block;
  height: 1.15em;
  overflow: hidden;
  vertical-align: top;
  color: var(--c-arena);
}
.portada-lema__pista { display: flex; flex-direction: column; }
.portada-lema__pista.desliza { transform: translateY(-50%); transition: transform 0.2s ease; }
.portada-lema__item { display: block; height: 1.15em; white-space: nowrap; }
@media (max-width: 767px) {
  .portada-lema { padding-left: 0; }
  .portada-lema__icono { display: none; }
}

/* ---------- Testimonios ---------- */
.portada-testimonios {
  margin-bottom: var(--portada-hueco);
  background: url('/assets/img/portada-testimonios-fondo.webp') center / cover no-repeat;
}
.portada-testimonios__dentro { display: flex; flex-direction: column; align-items: center; gap: var(--portada-cabeza); }
.portada-testimonios__rejilla {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(500px, auto);
  gap: 40px;
  width: 100%;
}
.portada-testimonio {
  margin: 0;
  padding: 60px;
  border: 1px solid var(--c-borde);
  border-radius: var(--radio);
  background: var(--c-superficie);
}
/* La fila de estrellas ocupa una línea de texto (1,55) y las estrellas van centradas en ella */
.portada-testimonio__estrellas { display: flex; align-items: center; gap: 5px; height: calc(var(--t-texto) * 1.55); margin-bottom: 30px; font-size: 21px; color: var(--c-arena); }
.portada-testimonio__estrellas .portada-glifo { width: auto; aspect-ratio: 1078 / 1024; }
.portada-testimonio__texto { margin: 0; font-size: 20px; font-weight: 500; line-height: 1.5; color: var(--c-grafito); }
.portada-testimonios__foto { position: relative; overflow: hidden; border-radius: var(--radio); }
.portada-testimonios__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.portada-testimonios__foto::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.2); }

@media (max-width: 1180px) {
  .portada-testimonios__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: 30px; }
  .portada-testimonios__foto { min-height: 350px; }
  .portada-testimonio { padding: 50px 30px; }
  .portada-testimonio__texto { margin-bottom: 30px; } /* hueco del bloque de autor, vacío en WordPress */
  .portada-testimonio__estrellas { margin-bottom: 20px; font-size: 20px; }
}
@media (max-width: 767px) {
  .portada-testimonios__rejilla { grid-template-columns: minmax(0, 1fr); }
  .portada-testimonio__estrellas { margin-bottom: 40px; font-size: 16px; }
}

/* ---------- Equipo ---------- */
.portada-equipo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--portada-cabeza);
  margin-bottom: var(--portada-hueco);
}
.portada-equipo__rejilla { width: 100%; }

/* ---------- Cinta de servicios (portada.js ajusta la duración a 60 px/s) ---------- */
.portada-cinta {
  margin-bottom: var(--portada-hueco);
  padding: 30px 0;
  overflow: hidden;
  border-block: 1px solid var(--c-borde);
  background: var(--c-superficie);
}
.portada-cinta__pista { display: flex; width: max-content; animation: portada-cinta 36s linear infinite; }
.portada-cinta__grupo { display: flex; align-items: center; gap: 50px; padding-right: 50px; list-style: none; }
.portada-cinta__item {
  display: flex;
  align-items: center;
  gap: 50px;
  font-family: var(--f-titulos);
  font-size: var(--t-h4);
  line-height: 1.25;
  letter-spacing: -1px;
  color: var(--c-grafito);
  white-space: nowrap;
}
.portada-cinta__icono { font-size: 20px; color: var(--c-primario); }
@keyframes portada-cinta { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .portada-cinta__pista { animation: none; }
  .portada-lema__pista.desliza { transform: none; transition: none; }
  .portada-ventajas__forma { transform: none !important; }
}

/* ---------- Tableta y móvil: hero ---------- */
@media (max-width: 1180px) {
  .portada-hero {
    gap: 100px;
    padding-top: 220px;
    background-position: 0 0, -180px 0;
    /* El fondo mide lo que medía cuando el hero llevaba el vídeo (16:9 del ancho útil + el hueco de 100 px): sin
       eso, al acortarse el hero las ondas subían detrás de los botones y los textos dejaban de leerse. */
    background-size: 100% 100%, auto calc(100% + 138px + 100px + min(100vw - 60px, 1120px) * 0.5625);
  }
  .portada-hero__contenido { gap: 40px; }
  /* Como en WordPress: 803 px aunque no quepa (de 768 a 863 px se sale y .portada la recorta), en una sola línea.
     La etiqueta NEXT-GEN mide ahí 113 px, con 17 px de aire a la derecha del texto. */
  .portada-hero__pildora { width: 803px; max-width: none; margin-bottom: 0; }
  .portada-hero__nextgen { padding-right: 25.4px; }
  .portada-hero__titulo { max-width: 510px; }
  .portada-manifiesto { gap: 40px; }
}
@media (max-width: 767px) {
  .portada-hero {
    gap: 80px;
    padding-top: 140px;
    background-position: 0 0, -130px 0;
    background-size: 100% 100%, auto calc(100% + 65px + 80px + (100vw - 40px) * 0.5625);
  }
  .portada-hero__contenido { gap: 30px; }
  .portada-hero__pildora { width: 310px; padding: 7px 10px; }
  .portada-hero__nextgen { display: none; }
  .portada-hero__lema { text-align: center; }
  .portada-hero__botones { gap: 10px; }
  .portada-manifiesto { gap: 30px; margin-bottom: 80px; }
}