/* Visible RD · capa nueva (octubre 2026): más amigable e interactiva sobre el diseño de siempre */
:root { --radio-suave: 28px; --brillo-x: 50%; --brillo-y: 50%; }

/* Barra de progreso de lectura */
.progreso-lectura { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; background: var(--senal); transform-origin: left; transform: scaleX(0); pointer-events: none; }

/* Portada: fondo de manchas suaves en lugar de anillos */
.hero::before { display: none; }
.hero-manchas { position: absolute; inset: -10% -10% auto; height: 120%; pointer-events: none; z-index: 0; filter: blur(60px); opacity: .55; }
.hero-manchas i { position: absolute; border-radius: 50%; animation: mancha 18s ease-in-out infinite alternate; }
.hero-manchas i:nth-child(1) { width: 520px; height: 520px; right: 4%; top: 2%; background: #FFB59B; }
.hero-manchas i:nth-child(2) { width: 420px; height: 420px; right: 26%; top: 34%; background: #B9C8FF; animation-delay: -6s; }
.hero-manchas i:nth-child(3) { width: 300px; height: 300px; left: -4%; top: 52%; background: #FFD9A8; animation-delay: -12s; }
@keyframes mancha { to { transform: translate(40px, -30px) scale(1.12); } }
.hero .envoltura { z-index: 1; }

/* Prueba en vivo: el visitante escribe su negocio y la demostración cambia */
.prueba { margin-top: 30px; padding: 18px; border-radius: var(--radio-suave); background: rgba(255,255,255,.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(18,19,23,.05), 0 24px 60px -30px rgba(18,19,23,.35); max-width: 560px; }
.prueba label { display: block; font-weight: 700; font-size: .92rem; margin-bottom: 10px; }
.prueba-fila { display: flex; gap: 10px; }
.prueba input { flex: 1; min-width: 0; border: 1.5px solid rgba(18,19,23,.14); border-radius: 999px; padding: 14px 18px; font: inherit; background: var(--blanco); transition: border-color .2s, box-shadow .2s; }
.prueba input:focus { outline: none; border-color: var(--senal); box-shadow: 0 0 0 4px var(--senal-suave); }
.prueba .boton { padding: 14px 20px; }
.tipos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.tipos button { border: 1.5px solid rgba(18,19,23,.12); background: var(--blanco); border-radius: 999px; padding: 8px 14px; font-weight: 600; font-size: .9rem; transition: transform .2s, border-color .2s, background .2s, color .2s; }
.tipos button:hover { transform: translateY(-2px); border-color: var(--senal); }
.tipos button[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
@media (max-width: 520px) { .prueba-fila { flex-direction: column; } .prueba .boton { width: 100%; } }

/* Tarjetas que responden al cursor: brillo que sigue el ratón y leve inclinación */
.reacciona { position: relative; overflow: hidden; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .3s; transform-style: preserve-3d; }
.reacciona::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(420px circle at var(--brillo-x) var(--brillo-y), rgba(255,79,31,.16), transparent 45%); }
.reacciona:hover::after { opacity: 1; }
.seccion--tinta .reacciona::after { background: radial-gradient(420px circle at var(--brillo-x) var(--brillo-y), rgba(255,255,255,.10), transparent 45%); }
.extra, .garantia { border-radius: var(--radio-suave); }

/* Trabajos y opiniones (se llenan desde el panel; si no hay, no se muestran) */
.trabajos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; margin-top: 44px; }
.trabajo { display: block; text-decoration: none; border-radius: var(--radio-suave); background: var(--blanco); box-shadow: var(--sombra); overflow: hidden; }
.trabajo-foto { aspect-ratio: 4 / 3; overflow: hidden; background: var(--papel-2); }
.trabajo-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.trabajo:hover .trabajo-foto img { transform: scale(1.06); }
.trabajo-texto { padding: 18px 20px 22px; }
.trabajo-texto b { display: block; font-family: var(--display); font-size: 1.3rem; letter-spacing: -0.02em; }
.trabajo-texto span { color: var(--gris); font-size: .95rem; }
.trabajo-texto .ir { display: inline-flex; gap: 6px; margin-top: 10px; font-weight: 700; color: var(--senal); }

.opiniones { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 2px 18px; margin-top: 40px; scrollbar-width: thin; }
.opinion { flex: 0 0 min(360px, 86%); scroll-snap-align: start; padding: 26px; border-radius: var(--radio-suave); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); }
.opinion .estrellas { color: #F4B400; letter-spacing: 2px; }
.opinion p { margin: 12px 0 18px; font-size: 1.08rem; color: var(--papel); }
.opinion b { display: block; color: var(--papel); }
.opinion small { color: #AEB2BD; }
.nota-ejemplo { display: inline-block; margin-top: 14px; font-size: .82rem; font-weight: 700; color: var(--senal); background: var(--senal-suave); border-radius: 999px; padding: 6px 12px; }

/* Barra fija en el celular */
.barra-movil { display: none; }
@media (max-width: 760px) {
  .barra-movil { display: flex; gap: 10px; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 70; padding: 10px; border-radius: 999px; background: rgba(18,19,23,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 20px 50px -20px rgba(18,19,23,.6); transform: translateY(150%); transition: transform .45s cubic-bezier(.2,.8,.2,1); }
  .barra-movil.ve { transform: none; }
  .barra-movil .boton { flex: 1; padding: 13px 16px; }
  .barra-movil .wa { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 50%; background: #25D366; display: grid; place-items: center; }
  body.con-barra-movil .chat-boton { bottom: 84px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-manchas i { animation: none; }
  .reacciona { transform: none !important; }
}