/* Albalá Seguros — efectos visuales
   Solo actúan con la clase .fx (JavaScript activo y sin «reducir movimiento»).
   Sin ellos, la web se ve completa y estática. */

@property --s { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --py { syntax: '<length>'; inherits: false; initial-value: 0px; }

/* ---------- Texto por palabras que sube desde una máscara */
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .1em .02em .16em; margin: -.1em -.02em -.16em; }
.split .wi { display: inline-block; }
.fx .split .wi { transform: translate3d(0, 115%, 0) rotate(5deg); transform-origin: 0 100%; transition: transform 1.15s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--i) * 42ms + 80ms); }
.fx .split.is-in .wi { transform: none; }
.fx .hero-line { transform: none; transition: opacity .7s; }
.fx .hero-line .split .wi { transition-delay: calc(var(--i) * 55ms + 250ms); }

/* ---------- Imágenes: cortinilla de abajo arriba + zoom que se asienta */
.fx .img-reveal { clip-path: inset(100% 0 0 0); --s: 1.22; transition: clip-path 1.35s cubic-bezier(.77, 0, .18, 1), --s 2s cubic-bezier(.16, 1, .3, 1); transition-delay: var(--d, 0ms); }
.fx .img-reveal.is-in { clip-path: inset(0 0 0 0); --s: 1; }
.fx img.img-reveal { transform: scale(var(--s)); }
.fx .post-media .cover.img-reveal { transform: scale(var(--s)); }

/* ---------- Parallax de cabeceras */
.fx .page-hero-media img { animation: none; height: 124%; margin-top: -12%; transform: translate3d(0, var(--py), 0); will-change: transform; }
.fx .hero .slides { inset: -10% 0; transform: translate3d(0, var(--py), 0); will-change: transform; }

/* ---------- Carrusel: cortinilla lateral entre imágenes */
.fx .slide { transition: none; }
.fx .slide.is-prev { opacity: 1; z-index: 1; }
.fx .slide.is-on { opacity: 1; z-index: 2; animation: slide-wipe 1.5s cubic-bezier(.77, 0, .18, 1) both; }
@keyframes slide-wipe { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }

/* ---------- Barra de progreso de lectura */
.scroll-progress { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 120; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--azul), var(--azul-medio), var(--azul-claro)); pointer-events: none; }

/* ---------- Cabecera que se esconde al bajar y vuelve al subir */
.fx .site-header { transition: transform .45s cubic-bezier(.16, 1, .3, 1), border-color .3s, box-shadow .3s; }
.fx .site-header.is-hidden { transform: translateY(-105%); }

/* ---------- Palabras gigantes de fondo que se desplazan con el scroll */
.bg-word { position: absolute; z-index: 0; top: 40px; left: 50%; white-space: nowrap; font-family: var(--serif); font-weight: 600; font-size: clamp(90px, 17vw, 260px); line-height: 1; letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1px rgba(0, 76, 154, .13); transform: translate3d(calc(-50% + var(--dx, 0px)), 0, 0); pointer-events: none; user-select: none; }
.why .bg-word { -webkit-text-stroke-color: rgba(156, 187, 224, .12); top: auto; bottom: 20px; }
.products, .why { position: relative; overflow: hidden; }
.products > .wrap, .why > .wrap { position: relative; z-index: 1; }

/* ---------- Cinta cinética de palabras */
.kinetic { padding: 70px 0; overflow: hidden; background: var(--paper); border-block: 1px solid var(--line); }
.kinetic-row { overflow: hidden; }
.kinetic-track { display: flex; width: max-content; will-change: transform; }
.kinetic-track span { font-family: var(--serif); font-weight: 500; font-size: clamp(46px, 8vw, 120px); line-height: 1.05; letter-spacing: -.02em; padding-right: .45em; color: var(--marino); white-space: nowrap; }
.kinetic-track span:nth-child(even) { color: transparent; -webkit-text-stroke: 1.5px var(--azul-medio); font-weight: 300; }
.kinetic-row + .kinetic-row { margin-top: 6px; }

/* ---------- Indicador «Desliza» de la portada */
.scroll-cue { position: absolute; right: max(16px, calc((100% - var(--wrap)) / 2)); bottom: 128px; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 12px; color: rgba(255, 255, 255, .75); font-size: 10.5px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; text-decoration: none; writing-mode: vertical-rl; }
.scroll-cue i { position: relative; width: 1px; height: 54px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.scroll-cue i::after { content: ""; position: absolute; left: 0; top: -50%; width: 100%; height: 50%; background: #fff; animation: cue 2s cubic-bezier(.77, 0, .18, 1) infinite; }
@keyframes cue { to { top: 100%; } }

/* ---------- Enlaces con subrayado que se dibuja */
.fx .footer-grid p a, .fx .prose p a, .fx .topbar a, .fx .source a, .fx .info-list a { background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-position: 100% 100%; background-repeat: no-repeat; transition: background-size .45s cubic-bezier(.16, 1, .3, 1), color .2s; text-decoration: none; }
.fx .footer-grid p a:hover, .fx .prose p a:hover, .fx .topbar a:hover, .fx .source a:hover, .fx .info-list a:hover { background-size: 100% 1px; background-position: 0 100%; }

/* ---------- Grano sutil de papel */
.fx body::after { content: ""; position: fixed; inset: 0; z-index: 140; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- Intro de marca (portada, una vez por sesión) */
.intro { position: fixed; inset: 0; z-index: 300; background: var(--marino); display: grid; place-items: center; align-content: center; gap: 26px; clip-path: inset(0 0 0 0); transition: clip-path 1s cubic-bezier(.77, 0, .18, 1); }
.intro.is-out { clip-path: inset(0 0 100% 0); }
.intro-mark { width: 120px; overflow: visible; }
.intro-mark polygon { opacity: 0; animation: piece .9s cubic-bezier(.16, 1, .3, 1) forwards; }
.intro-mark polygon { stroke: #fff; stroke-width: 5; stroke-linejoin: round; }
.intro-mark .p1 { fill: var(--azul); --from: translate(70px, -90px); }
.intro-mark .p2 { fill: var(--azul-medio); --from: translate(-90px, 60px); animation-delay: .12s; }
.intro-mark .p3 { fill: var(--azul-medio); --from: translate(90px, 70px); animation-delay: .24s; }
@keyframes piece { from { opacity: 0; transform: var(--from) rotate(-8deg); } to { opacity: 1; transform: none; } }
.intro-word { display: flex; gap: .35em; margin: 0; font-family: var(--serif); font-weight: 300; font-size: 22px; letter-spacing: .02em; color: rgba(255, 255, 255, .85); overflow: hidden; }
.intro-word span { display: inline-block; transform: translateY(110%); animation: rise .8s cubic-bezier(.16, 1, .3, 1) forwards; }
.intro-word span:nth-child(1) { animation-delay: .55s; }
.intro-word span:nth-child(2) { animation-delay: .62s; color: var(--azul-claro); }
.intro-word span:nth-child(3) { animation-delay: .69s; }
@keyframes rise { to { transform: none; } }
body.is-intro { overflow: hidden; }

/* ---------- Cursor propio (solo ratón) */

/* ---------- Botones magnéticos */
.fx-cursor .btn, .fx-cursor .ck-btn, .fx-cursor .social a, .fx-cursor .to-top.is-on, .fx-cursor .burger { transform: translate3d(var(--mx, 0px), var(--my, 0px), 0); transition: transform .5s cubic-bezier(.16, 1, .3, 1), background .25s, color .25s, box-shadow .25s, border-color .25s, opacity .3s; }
.fx-cursor .btn.is-magnet { transition: transform .15s linear, background .25s, color .25s, box-shadow .25s; }

/* ---------- Tarjetas en 3D con brillo que sigue al ratón */
.tilt { position: relative; }
.fx-cursor .tilt, .fx-cursor .tilt:hover { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px)); transition: transform .6s cubic-bezier(.16, 1, .3, 1), box-shadow .35s, border-color .35s, opacity .8s; }
.fx-cursor .tilt:hover { --ty: -6px; }
.fx-cursor .tilt::before { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .5), transparent 55%); mix-blend-mode: soft-light; transition: opacity .4s; }
.fx-cursor .tilt:hover::before { opacity: 1; }
.fx-cursor .why-item.tilt::before { background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(156, 187, 224, .22), transparent 60%); mix-blend-mode: normal; }

/* ---------- Cortina entre páginas: sube para descubrir la página nueva y baja al salir */
html.pt-in::after, html.pt-out::after {
  content: ""; position: fixed; inset: 0; z-index: 400; pointer-events: none;
  background: var(--marino) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-6 -6 387 295'%3E%3Cpolygon fill='%23004c9a' stroke='%23fff' stroke-width='7' stroke-linejoin='round' points='162,0 268,0 375,188 268,188'/%3E%3Cpolygon fill='%236293ca' stroke='%23fff' stroke-width='7' stroke-linejoin='round' points='106,93 212,93 108,283 0,283'/%3E%3Cpolygon fill='%236293ca' stroke='%23fff' stroke-width='7' stroke-linejoin='round' points='160,195 375,195 325,283 212,283'/%3E%3C/svg%3E") center / 72px auto no-repeat;
}
html.pt-in::after { animation: pt-up .9s .12s cubic-bezier(.77, 0, .18, 1) forwards; }
html.pt-in:has(body.p-index)::after { animation-delay: 2.5s; } /* por si fx.js no llega a cargar */
html.pt-out::after { pointer-events: auto; animation: pt-cover .55s cubic-bezier(.77, 0, .18, 1) both; }
@keyframes pt-up { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); } }
@keyframes pt-cover { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
html.pt-out body { transition: transform .55s cubic-bezier(.77, 0, .18, 1); transform: translateY(-40px); }

@media (max-width: 900px) {
  .bg-word { font-size: 28vw; }
  .kinetic { padding: 46px 0; }
  .scroll-cue { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .split .wi, .img-reveal { transform: none !important; clip-path: none !important; }
  .scroll-progress, .bg-word, .scroll-cue i::after { display: none; }
  .kinetic-row + .kinetic-row { display: none; }
}