/* La página pública de ViYi.
   Hoja propia y no la de la app: la app pesa 3.500 líneas de relieve, botones y
   animaciones que aquí no se usan, y quien llega a esta página no debería pagar
   por ellas. Se comparten los COLORES, que es lo que hace que se sienta la
   misma cosa. */

:root {
  --fondo: #0a0a0b;
  --superficie: #151517;
  --linea: #24242a;
  --texto: #eceef0;
  --texto-suave: #9a9aa4;
  --primario: #a5ff2e;
  --ancho: 1040px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: 'Josefin Sans', -apple-system, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---- Barra ---- */
.barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 18px 22px;
}
/* La marca, con presencia: a 34 px parecía un favicon perdido en la esquina.
   En el teléfono baja un poco, que ahí la barra es más estrecha. */
.marca { display: block; width: 48px; height: 48px; border-radius: 12px; }
@media (max-width: 720px) {
  .marca { width: 42px; height: 42px; border-radius: 11px; }
}
.entrar {
  color: var(--texto-suave);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--linea);
}
.entrar:hover { color: var(--texto); border-color: var(--texto-suave); }

main { max-width: var(--ancho); margin: 0 auto; padding: 0 22px; }

/* ---- Portada ----
   Texto e imagen a dos columnas en pantalla ancha, apilados en el teléfono. La
   imagen es el render del control de verdad: esto ES el producto, y un botón
   así se entiende sin leer nada.
   El resplandor verde es la única licencia decorativa: es la puerta iluminada
   de la marca, traída sin dibujarla. */
.portada {
  position: relative;
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  align-items: center;
  gap: 30px;
  padding: 40px 0 56px;
}
.portada-texto { position: relative; }
.portada-foto {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 234px;
  height: auto;
  /* La sombra la despega del fondo negro, que si no el render flota sin peso. */
  filter: drop-shadow(0 24px 44px rgba(0, 0, 0, 0.75));
}
@media (max-width: 720px) {
  .portada { grid-template-columns: 1fr; text-align: center; padding-top: 22px; }
  .portada .acciones { justify-content: center; }
  .portada .lema { margin-left: auto; margin-right: auto; }
  .portada-foto { max-width: 158px; order: -1; margin-bottom: 4px; }
}
.portada::before {
  content: '';
  position: absolute;
  top: -60px;
  left: 50%;
  width: min(680px, 110%);
  height: 420px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(165, 255, 46, 0.13), transparent 68%);
  pointer-events: none;
}
.portada h1 {
  position: relative;
  margin: 0 0 18px;
  font-family: 'Fredoka', 'Josefin Sans', sans-serif;
  font-size: clamp(33px, 5.6vw, 52px);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.lema {
  position: relative;
  max-width: 26em;
  /* A la izquierda con el título, no centrada: en dos columnas, una línea
     centrada bajo un título alineado se lee como un descuido. En el teléfono
     la columna se apila y el `text-align: center` del contenedor la recentra. */
  margin: 0 0 26px;
  color: var(--texto-suave);
  font-size: clamp(16px, 2.4vw, 19px);
}
.acciones {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.detalle {
  position: relative;
  margin: 26px 0 0;
  color: var(--texto-suave);
  font-size: 14px;
}

.btn-primario, .btn-secundario {
  display: inline-block;
  padding: 13px 28px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.btn-primario { background: var(--primario); color: #10130a; }
.btn-primario:hover { filter: brightness(1.08); }
.btn-secundario { background: transparent; color: var(--texto); border-color: var(--linea); }
.btn-secundario:hover { border-color: var(--texto-suave); }

/* ---- La galería de controles ----
   Tres imágenes y dos palabras cada una, en vez de tres párrafos. Es lo que
   pidió el usuario: más foto y menos texto. */
.galeria {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 10px 0 26px;
}
.galeria figure {
  margin: 0;
  padding: 22px 16px 16px;
  border-radius: 18px;
  background: var(--superficie);
  border: 1px solid var(--linea);
  text-align: center;
}
/* El botón: sin caja propia, que la caja ya la pone la ficha. */
.boton-demo {
  display: block;
  margin: 0 auto;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border-radius: 14px;
  transition: transform 0.12s ease;
}
.boton-demo:active { transform: scale(0.965); }
/* Al pulsar: se hunde y se enciende un halo verde que se apaga solo. Es la
   misma idea que en la app —el control responde al dedo— traída aquí sin la
   maquinaria de relieve de la app. */
.boton-demo.pulsado { animation: pulso-demo 0.42s ease-out; }
@keyframes pulso-demo {
  0%   { transform: scale(0.94); filter: brightness(1.35) drop-shadow(0 0 0 rgba(165, 255, 46, 0.9)); }
  55%  { transform: scale(1.015); filter: brightness(1.12) drop-shadow(0 0 18px rgba(165, 255, 46, 0.55)); }
  100% { transform: scale(1); filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .boton-demo, .boton-demo.pulsado { animation: none; transition: none; }
}

.galeria img {
  display: block;
  width: auto;
  height: 190px;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.6));
}
/* Redondos: el archivo es cuadrado con el botón centrado, así que recortarlo
   en círculo deja el botón y se lleva las esquinas oscuras. `cover` y no
   `contain` para que llene el círculo sin bordes. */
.boton-demo.redondo img {
  width: 190px;
  height: 190px;
  border-radius: 50%;
  object-fit: cover;
}

/* El Sabiem: panel de base y encima la capa que enciende "LLEGANDO". La capa
   es un PNG transparente con solo la palabra, así que basta con superponerla.
   Dura más que el hundido del botón —1,6 s— porque un ascensor que llega no
   llega en cuatro décimas. */
.boton-demo.capas { position: relative; }
.boton-demo.capas .capa {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  filter: none;
}
.boton-demo.capas.llegando .capa { opacity: 1; }
.galeria figcaption {
  margin-top: 14px;
  font-family: 'Fredoka', sans-serif;
  font-size: 16px;
  font-weight: 600;
}
@media (max-width: 720px) {
  .galeria { gap: 10px; }
  .galeria figure { padding: 14px 8px 12px; }
  .galeria img { height: 118px; }
  .boton-demo.redondo img { width: 118px; height: 118px; }
  .galeria figcaption { margin-top: 10px; font-size: 13px; }
}

/* ---- Casos ---- */
.titulo-seccion {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.casos { padding: 6px 0 12px; }
.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}
.rejilla article {
  padding: 24px;
  border-radius: 16px;
  border: 1px solid var(--linea);
}
.rejilla h3 {
  margin: 0 0 10px;
  font-family: 'Fredoka', sans-serif;
  font-size: 21px;
  font-weight: 600;
}
.rejilla p { margin: 0; color: var(--texto-suave); font-size: 15px; }

/* ---- Contacto ---- */
.contacto { padding: 54px 0 20px; }
.lema-corto { margin: 0 0 20px; color: var(--texto-suave); }
#form {
  display: grid;
  gap: 10px;
  max-width: 520px;
}
#form input, #form textarea {
  width: 100%;
  padding: 13px 16px;
  border-radius: 12px;
  border: 1px solid var(--linea);
  background: var(--superficie);
  color: var(--texto);
  font-family: inherit;
  font-size: 16px;   /* 16 y no menos: por debajo, iOS hace zoom al enfocar */
  resize: vertical;
}
#form input::placeholder, #form textarea::placeholder { color: var(--texto-suave); }
#form input:focus, #form textarea:focus { outline: none; border-color: var(--primario); }
#form button { justify-self: start; margin-top: 4px; }
#form button[disabled] { opacity: 0.6; cursor: default; }
/* La trampa para robots: fuera de la vista sin `display:none`, que algunos
   detectan y saltan. */
#web { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.aviso { margin: 4px 0 0; font-size: 15px; min-height: 1.4em; }
.aviso.bien { color: var(--primario); }
.aviso.mal { color: #f09595; }
.o-bien { margin: 18px 0 0; color: var(--texto-suave); font-size: 15px; }
.o-bien a { color: var(--texto); }

footer {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
  max-width: var(--ancho);
  margin: 40px auto 0;
  padding: 26px 22px 40px;
  border-top: 1px solid var(--linea);
  font-size: 14px;
}
footer a { color: var(--texto-suave); text-decoration: none; }
footer a:hover { color: var(--texto); }