/*--------------------------------------------------------------
# Portada — una sola columna centrada
#
# Se carga DESPUÉS de theme.css y solo redefine la portada; el resto de
# la página queda igual.
#
# Idea: en vez de partir la pantalla en dos mitades que compiten por el
# ancho —lo que obligaba a encoger el titular—, una sola columna
# centrada que se lee de arriba abajo: marca, titular, promesa, pruebas
# y acción. Al no repartir el ancho, el título recupera cuerpo y nada
# tiene que achicarse para caber.
--------------------------------------------------------------*/

#intro {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 96px clamp(20px, 5vw, 64px) 40px;
}

/* 1 · La marca abre la página: el logo manda y los otros dos lo
       acompañan a los lados, a escala de sello. */
#intro .product-screens {
  order: 1;
  flex: 0 0 auto;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2.2vw, 34px);
  width: auto;
  max-width: 100%;
  margin: 0 0 clamp(12px, 2.4vh, 30px);
}

#intro .product-screens .product-screen-1,
#intro .product-screens .product-screen-2,
#intro .product-screens .product-screen-3 {
  flex: 0 0 auto;
  align-items: center;
  height: auto;
}

#intro .product-screens .product-screen-1 img {
  max-height: min(21vh, 215px);
  animation: silpos-flotar 7s ease-in-out infinite;
}

#intro .product-screens .product-screen-2 img { max-height: min(11.5vh, 112px); opacity: .9; }
#intro .product-screens .product-screen-3 img { max-height: min(9.5vh, 94px); opacity: .9; }

/* 2 · El texto, a todo el ancho útil: el titular ya no compite */
#intro .intro-text {
  order: 2;
  flex: 0 0 auto;
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  align-items: center;
  text-align: center;
}

#intro .intro-text h1 {
  font-size: clamp(27px, 3.6vw, 46px) !important;
  line-height: 1.12;
  margin-bottom: 10px;
}

#intro .intro-text > p {
  font-size: clamp(14px, 1.3vw, 18px) !important;
  color: rgba(255, 255, 255, .8);
  margin-bottom: 20px;
}

#intro .intro-text #claves .claves-intro {
  font-size: clamp(15px, 1.4vw, 19px) !important;
  color: #fff;
  max-width: 720px;
  margin: 0 auto 22px;
}

/* 3 · Las tres claves en una sola fila: se leen como una terna */
#intro .intro-text #claves { width: 100%; }

#intro .intro-text #claves .row {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  margin: 0;
}

#intro #claves .row > [class*="col-"] {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  max-width: 290px;
  margin: 0 !important;
  display: flex;
}

/* En columna, con el icono arriba: las tres frases no caben una al lado
   de otra en horizontal (sumaban 1083px sobre 940 disponibles). */
#intro #claves .clave {
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 18px 16px 16px;
  gap: 10px;
  text-align: center;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: var(--r-md);
}

#intro #claves .clave p {
  color: #fff;
  font-weight: 500;
  font-size: clamp(13px, 1.05vw, 14.5px);
  line-height: 1.4;
  text-align: center;
}

#intro #claves .clave-icono {
  width: 42px;
  height: 42px;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .26);
}

#intro #claves .clave-icono i { color: #fff; font-size: 19px; }

#intro .intro-acciones { margin-top: 24px; }

/* Pantallas bajas: la pila se comprime para seguir entrando entera */
@media (max-height: 820px) {
  #intro { padding-top: 86px; padding-bottom: 28px; }
  #intro .product-screens .product-screen-1 img { max-height: min(18vh, 155px); }
  #intro .intro-text h1 { font-size: clamp(24px, 3vw, 36px) !important; }
  #intro .intro-text > p { margin-bottom: 14px; }
  #intro .intro-text #claves .claves-intro { margin-bottom: 16px; }
  #intro .intro-acciones { margin-top: 18px; }
}

@media (max-width: 991px) {
  #intro { padding-top: 96px; }
  #intro .product-screens { flex-wrap: wrap; }
  #intro #claves .row > [class*="col-"] { flex: 0 0 100%; width: 100%; max-width: 100%; }
  #intro #claves .clave { width: 100%; }
}

/* El halo venía dimensionado para un logo de 290px; con el logo a 108
   su resplandor (185% del alto) se derramaba sobre el título. A esta
   escala basta un contorno breve. */
#intro .product-screens .product-screen-1::before {
  width: 104%;
  height: 128%;
  background: radial-gradient(ellipse at center,
    rgba(99, 236, 208, .22) 0%,
    rgba(46, 147, 169, .12) 45%,
    transparent 72%);
}

#intro .product-screens .product-screen-1 img {
  filter:
    drop-shadow(0 0 10px rgba(255, 255, 255, .45))
    drop-shadow(0 0 26px rgba(99, 236, 208, .28))
    drop-shadow(0 10px 22px rgba(4, 34, 43, .38));
}

#intro .product-screens .product-screen-2 img,
#intro .product-screens .product-screen-3 img {
  filter:
    drop-shadow(0 0 8px rgba(255, 255, 255, .35))
    drop-shadow(0 8px 18px rgba(4, 34, 43, .35));
}

/* Separación firme entre la marca y el titular */
#intro .product-screens { margin-bottom: clamp(26px, 5vh, 58px) !important; }

/* El bloque de texto arrastraba una altura fija —calc(50% - 84px), unos
   243px— de cuando la portada era de dos columnas. Su contenido mide
   ~400px, así que se desbordaba por arriba y el título acababa encima
   del logo. En esta disposición la altura la marca el contenido. */
#intro .intro-text {
  height: auto !important;
  top: auto !important;
  justify-content: center;
}