/* AG Digital Studio · Piezas de ilustración compartidas (Inicio y Servicios)
   Ventana web, móvil con WhatsApp, tarjetas flotantes y QR, dibujados con código:
   ligeros, nítidos y decorativos (el contenido real siempre está en el texto). */

.hv-ventana { background: var(--blanco); border-radius: 12px; box-shadow: 0 24px 60px rgba(0, 0, 0, .28); overflow: hidden; }
.hv-ventana__barra { display: flex; align-items: center; padding: 8px 10px; background: #F1F2F0; }
.hv-ventana__barra i { width: 8px; height: 8px; border-radius: 50%; background: #D3D5D2; margin-right: 5px; }
.hv-ventana__url { margin-left: 8px; padding: 2px 10px; border-radius: 999px; background: var(--blanco); color: var(--texto-suave); font-size: 11px; }
.hv-web { padding: 12px 14px 16px; }
.hv-web__nav { display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 12px; }
.hv-web__nav span:last-child { width: 46%; height: 6px; border-radius: 4px; background: repeating-linear-gradient(90deg, var(--gris) 0 22%, transparent 22% 26%); }
.hv-web__cuerpo { display: grid; grid-template-columns: 1.1fr 1fr; grid-gap: 12px; align-items: center; margin-top: 12px; }
.hv-web__tit { font-weight: 600; font-size: 16px; line-height: 1.15; }
.hv-web__lineas { margin-top: 8px; height: 22px; background: linear-gradient(var(--gris), var(--gris)) 0 0 / 90% 6px no-repeat, linear-gradient(var(--gris), var(--gris)) 0 12px / 70% 6px no-repeat; }
.hv-web__boton { display: inline-block; margin-top: 8px; padding: 5px 12px; border-radius: 999px; background: var(--verde); color: var(--blanco); font-size: 11px; font-weight: 500; }
.hv-web__foto {
  height: 92px; border-radius: 10px;
  background:
    radial-gradient(circle at 70% 35%, #F3D2C2 0 18%, transparent 19%),
    radial-gradient(ellipse at 70% 95%, var(--terracota) 0 34%, transparent 35%),
    linear-gradient(135deg, #E8F3EF, #CDE8DE);
}
.hv-web__tarjetas { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 8px; margin-top: 12px; }
.hv-web__tarjetas span { height: 30px; border-radius: 8px; background: #F4F5F3; border: 1px solid var(--gris); }

.hv-telefono { padding: 7px; border-radius: 28px; background: var(--grafito); box-shadow: 0 24px 50px rgba(0, 0, 0, .35); }
.hv-telefono__pantalla { border-radius: 22px; overflow: hidden; background: #ECE5DD; min-height: 240px; display: flex; flex-direction: column; }
.hv-wa__cab { display: flex; align-items: center; padding: 14px 10px 8px; background: var(--verde); color: var(--blanco); font-weight: 600; font-size: 12px; }
.hv-wa__cab::before { content: ""; width: 22px; height: 22px; border-radius: 50%; background: var(--terracota); margin-right: 8px; flex: none; }
.hv-wa__chat { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 10px 8px 12px; }
.hv-burbuja { max-width: 92%; padding: 7px 9px; border-radius: 10px; font-size: 12px; box-shadow: 0 1px 1px rgba(0, 0, 0, .08); }
.hv-burbuja + .hv-burbuja { margin-top: 8px; }
.hv-burbuja--cliente { align-self: flex-start; background: var(--blanco); border-top-left-radius: 3px; }
.hv-burbuja--negocio { align-self: flex-end; background: #D6F5E3; border-top-right-radius: 3px; }
.hv-escribiendo { align-self: flex-end; display: none; margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: #D6F5E3; }
.hv-escribiendo i { display: inline-block; width: 6px; height: 6px; margin: 0 2px; border-radius: 50%; background: var(--verde); opacity: .5; }

.hv-tarjeta { display: flex; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--blanco); box-shadow: 0 14px 34px rgba(0, 0, 0, .22); }
.hv-tarjeta strong { display: block; font-weight: 600; }
.hv-aviso__icono { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-right: 10px; border-radius: 50%; background: var(--teal-tinte); color: var(--verde); flex: none; }
.hv-aviso__icono svg { width: 16px; height: 16px; }
.hv-google { flex-direction: row; }
.hv-google__marca { font-weight: 600; letter-spacing: -.01em; }
.hv-google__estrellas { color: #6E4800; letter-spacing: 1px; }
.hv-qr {
  width: 42px; height: 42px; margin-left: 12px; flex: none; border-radius: 4px;
  background:
    linear-gradient(90deg, var(--grafito) 0 30%, transparent 30% 40%, var(--grafito) 40% 50%, transparent 50% 70%, var(--grafito) 70%) 0 0 / 100% 20% no-repeat,
    linear-gradient(90deg, transparent 0 20%, var(--grafito) 20% 40%, transparent 40% 60%, var(--grafito) 60% 80%, transparent 80%) 0 40% / 100% 20% no-repeat,
    linear-gradient(90deg, var(--grafito) 0 30%, transparent 30% 50%, var(--grafito) 50% 60%, transparent 60% 70%, var(--grafito) 70%) 0 100% / 100% 20% no-repeat,
    linear-gradient(90deg, var(--grafito) 0 10%, transparent 10% 50%, var(--grafito) 50% 70%, transparent 70%) 0 70% / 100% 12% no-repeat,
    var(--blanco);
  border: 3px solid var(--blanco); outline: 1px solid var(--gris);
}

/* Hover en la composición: cada pieza se levanta (solo ratón; el lector de pantalla recibe la descripción) */
.hv-tarjeta:hover, .hv-telefono:hover, .hv-ventana:hover { box-shadow: 0 28px 64px rgba(0, 0, 0, .34); }

@keyframes hv-entrada { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
@keyframes hv-escribe { 0% { opacity: 0; } 1% { opacity: 1; } 99% { opacity: 1; } 100% { opacity: 0; height: 0; padding: 0; margin: 0; } }
@keyframes hv-punto { 0%, 100% { opacity: .35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
@keyframes hv-aparece { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes hv-campana { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }