/* =============================================================
   MAQUETA DE EJEMPLO — página de muestra dentro del hero

   Solo la carga `version-uno-landing-imagenes.html`. El `index.html`
   sigue con la maqueta abstracta, así que puedes comparar las dos y
   quedarte con la que convierta mejor.

   La misma página renderizada dos veces: la laptop muestra la versión
   de escritorio y el teléfono la versión móvil, con un recorte
   distinto de la foto centrado en el retrato.
   ============================================================= */

.zz {
  position: relative;
  width: 100%; height: 100%;
  overflow: hidden;
  background: #0d1b2a;
  font-family: var(--body);
}

.zz-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Velo oscuro: sin él, el texto blanco del cliente no se lee sobre la foto */
.zz-tint {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(10,22,38,.86) 0%, rgba(10,22,38,.55) 46%, rgba(10,22,38,.25) 100%),
    linear-gradient(180deg, rgba(10,22,38,.35) 0%, transparent 30%, rgba(10,22,38,.55) 100%);
}

.zz-in {
  position: relative;
  height: 100%;
  display: flex; flex-direction: column;
}

.zz-logo {
  position: absolute; top: 4%; right: 5%;
  font-family: var(--display);
  font-weight: 700;
  color: #4a9fe0;
  letter-spacing: -0.03em;
  text-shadow: 0 1px 6px rgba(0,0,0,.4);
}

.zz-copy { margin-top: auto; }

.zz-h {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  color: #fff;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

.zz-p {
  color: rgba(255,255,255,.9);
  line-height: 1.4;
}

.zz-btn {
  display: inline-block;
  background: #4a9fe0;
  color: #fff;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: .1em;
  border-radius: 100px;
  text-align: center;
}

.zz-stats {
  display: flex;
  align-items: center;
  border-top: 1px solid rgba(255,255,255,.28);
  color: rgba(255,255,255,.85);
}
.zz-stats b { color: #fff; font-family: var(--display); font-weight: 700; }

/* --------------------------- Escritorio --------------------------- */
.zz-lap .zz-in    { padding: 5% 5.5% 4.5%; }
.zz-lap .zz-logo  { font-size: 20px; }
.zz-lap .zz-h     { font-size: 30px; margin-bottom: 10px; }
.zz-lap .zz-p     { font-size: 8.5px; max-width: 40%; margin-bottom: 12px; }
.zz-lap .zz-btn   { font-size: 7px; padding: 7px 16px; }
.zz-lap .zz-stats { gap: 5%; margin-top: 5%; padding-top: 10px; font-size: 7px; }
.zz-lap .zz-stats b { font-size: 11px; margin-right: 3px; }

/* Bloque de texto a la izquierda, como en el sitio real */
.zz-lap .zz-copy { max-width: 62%; }

/* ----------------------------- Móvil ------------------------------ */
.zz-mob .zz-in    { padding: 12% 8% 7%; }
.zz-mob .zz-logo  { top: 3%; right: auto; left: 8%; font-size: 11px; }
.zz-mob .zz-h     { font-size: 17px; margin-bottom: 8px; }
.zz-mob .zz-btn   { font-size: 5.5px; padding: 5px 11px; letter-spacing: .08em; }
.zz-mob .zz-stats {
  flex-direction: column; align-items: flex-start; gap: 3px;
  margin-top: 9%; padding-top: 7px; font-size: 5.5px;
}
.zz-mob .zz-stats b { font-size: 8px; margin-right: 2px; }

/* En el teléfono el velo pesa más abajo: el retrato ocupa el centro */
.zz-mob .zz-tint {
  background: linear-gradient(180deg,
    rgba(10,22,38,.55) 0%, rgba(10,22,38,.15) 34%,
    rgba(10,22,38,.55) 66%, rgba(10,22,38,.88) 100%);
}

/* Nota al pie de la banda, para que quede claro que es un cliente real */
.device-note {
  position: relative; z-index: 1;
  text-align: center;
  margin-top: 1.6rem;
  font-family: var(--display);
  font-size: .68rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-mute);
}
.device-note b { color: var(--ink); font-weight: 700; letter-spacing: -0.01em; text-transform: none; }

/* La foto de escritorio ya trae el rotulo de la clinica en la pared,
   asi que el logo superpuesto salia duplicado. Solo se conserva en
   el recorte movil, donde la pared queda fuera de cuadro. */
.zz-lap .zz-logo { display: none; }

/* En pantallas estrechas la laptop se dibuja a ~330px y lo que se ve
   es casi todo el lado izquierdo, donde el velo esta al 86%. El
   resultado era un rectangulo oscuro sin foto. Se aligera el velo y
   se corre el degradado para que el retrato entre en cuadro. */
@media (max-width: 700px) {
  .zz-lap .zz-tint {
    background:
      linear-gradient(90deg, rgba(10,22,38,.74) 0%, rgba(10,22,38,.34) 58%, rgba(10,22,38,.12) 100%),
      linear-gradient(180deg, rgba(10,22,38,.28) 0%, transparent 34%, rgba(10,22,38,.5) 100%);
  }
  .zz-lap .zz-in    { padding: 4.5% 5% 4%; }
  .zz-lap .zz-h     { font-size: 22px; }
  .zz-lap .zz-p     { display: none; }
  .zz-lap .zz-copy  { max-width: 70%; }
  .zz-lap .zz-stats { font-size: 6px; gap: 4%; }
  .zz-lap .zz-stats b { font-size: 9px; }
  .zz-lap .zz-stats span:nth-child(4) { display: none; }
}


/* =============================================================
   RECALIBRADO DEL VELO

   El velo original se calculo sobre una foto oscura. Esta foto de
   consultorio es palida (~rgb(200,200,205)), y al 86% el compuesto
   caia a rgb(37,40,45): la pantalla se veia azul marino liso, sin
   foto. Se baja a un nivel que oscurece lo justo para que el texto
   blanco se lea sin borrar la imagen.
   ============================================================= */
.zz-lap .zz-tint {
  background:
    linear-gradient(90deg, rgba(10,22,38,.62) 0%, rgba(10,22,38,.30) 52%, rgba(10,22,38,.10) 100%),
    linear-gradient(180deg, rgba(10,22,38,.20) 0%, transparent 32%, rgba(10,22,38,.42) 100%);
}
.zz-mob .zz-tint {
  background: linear-gradient(180deg,
    rgba(10,22,38,.48) 0%, rgba(10,22,38,.14) 32%,
    rgba(10,22,38,.46) 64%, rgba(10,22,38,.78) 100%);
}

@media (max-width: 700px) {
  .zz-lap .zz-tint {
    background:
      linear-gradient(90deg, rgba(10,22,38,.58) 0%, rgba(10,22,38,.26) 56%, rgba(10,22,38,.08) 100%),
      linear-gradient(180deg, rgba(10,22,38,.18) 0%, transparent 34%, rgba(10,22,38,.40) 100%);
  }
}

/* El rotulo del cliente ya no esta en la foto, asi que el logo
   superpuesto vuelve a hacer falta en las dos versiones. */
.zz-lap .zz-logo { display: block; color: #cfe3f5; }