/* Páginas de funciones. Va encima de negocio.css (mismo diseño que las de tipo de negocio):
   aquí van la portada con el celular que reproduce un clip real de la videoguía, las insignias
   del kit, los colores de las tarjetas de beneficios y el bloque de páginas relacionadas. */

/* Portada: celular con el clip, insignias flotando a su lado */
.fun-visual{ position:relative; display:flex; justify-content:center; align-items:flex-end; min-height:470px; margin:-6px 0 0; }
.fun-tel{ position:relative; z-index:2; width:262px; padding:10px; border-radius:42px; background:linear-gradient(160deg,#2a3f6b 0%,#0b1430 60%,#1d3a7a 100%); box-shadow:0 0 0 2px rgba(96,165,250,.35),0 30px 60px rgba(0,0,0,.45),0 0 60px rgba(37,99,235,.35); margin-bottom:-40px; }
.fun-tel::before{ content:''; position:absolute; top:18px; left:50%; width:84px; height:20px; margin-left:-42px; border-radius:12px; background:#05070f; z-index:3; }
.fun-tel video{ display:block; width:100%; height:auto; aspect-ratio:300/488; object-fit:cover; object-position:top; border-radius:32px; background:#0b1a3d; }
.fun-visual .fun-chip{ max-height:none; position:absolute; z-index:3; height:auto; filter:drop-shadow(0 12px 24px rgba(0,0,0,.35)); }
.fun-chip.f1{ width:200px; left:-4%; top:70px; }
.fun-chip.f2{ width:200px; right:-6%; top:150px; }
.fun-chip.f3{ width:240px; left:2%; bottom:70px; }
.fun-visual .fun-ticket{ max-height:none; position:absolute; z-index:1; width:118px; height:auto; right:4%; bottom:20px; transform:rotate(6deg); filter:drop-shadow(0 18px 30px rgba(0,0,0,.35)); }
.fun-pg .fun-ticket ~ .fun-chip.f2{ top:60px; }
.fun-pg .neg-hero{ overflow:hidden; }

/* Beneficios: cada ícono con su color, como el mockup */
.fun-pg .feat .ic{ color:#fff; border-radius:14px; }
.fun-pg .feat:nth-child(4n+1) .ic{ background:linear-gradient(160deg,#3b82f6,#1d4ed8); }
.fun-pg .feat:nth-child(4n+2) .ic{ background:linear-gradient(160deg,#34d399,#16a34a); }
.fun-pg .feat:nth-child(4n+3) .ic{ background:linear-gradient(160deg,#c084fc,#7c3aed); }
.fun-pg .feat:nth-child(4n+4) .ic{ background:linear-gradient(160deg,#fbbf24,#f97316); }

/* Páginas relacionadas */
.fun-pg .relacionados{ background:#fff; }
.fun-pg .relacionados h2{ color:#0b1a4a; }
.fun-pg .indice-card{ border-color:#e3ecf8; border-radius:16px; box-shadow:0 8px 22px rgba(15,40,90,.05); }
.fun-pg .indice-card .rel-tag{ align-self:flex-start; background:#e8f0ff; color:#1463f3; border-radius:999px; padding:4px 10px; }
.fun-pg .indice-card .rel-ir,.fun-pg .rel-todas{ color:#1463f3; }

@media(max-width:960px){
  .fun-visual{ min-height:420px; max-width:460px; margin:10px auto 0; }
  .fun-tel{ width:230px; }
  .fun-chip.f1{ left:0; } .fun-chip.f2{ right:0; } .fun-chip.f3{ left:4%; }
}
@media(max-width:600px){
  .fun-visual{ min-height:380px; }
  .fun-tel{ width:200px; padding:8px; border-radius:34px; }
  .fun-tel video{ border-radius:27px; }
  .fun-chip.f1,.fun-chip.f2{ width:150px; }
  .fun-visual .fun-chip.f3{ display:none; }
  .fun-visual .fun-ticket{ width:96px; }
}