/* =====================================================================
   aitorinmobiliario.com · Efectos
   Portado de la biblioteca de Allora (/var/www/nueva-allora/assets) y
   recoloreado al naranja de la marca. Todo opt-in por data-attr o clase,
   todo con guarda de prefers-reduced-motion y con el móvil aligerado.
   ===================================================================== */

/* ---------- 1) BackgroundPaths: trazos SVG que fluyen tras el hero ----- */
.bg-paths{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;pointer-events:none;z-index:0}
.bg-paths svg{position:absolute;inset:0;width:100%;height:100%}
.bg-paths path{fill:none;stroke:currentColor;stroke-linecap:round}
.bg-paths--naranja{color:#FF5000}
.bg-paths--suave{color:#ff8a4d}
@keyframes bgp-flow{0%{stroke-dashoffset:1;opacity:.22}50%{opacity:.55}100%{stroke-dashoffset:0;opacity:.22}}
.bg-paths path{stroke-dasharray:.42 .58;animation:bgp-flow var(--bgp-dur,22s) linear infinite;animation-delay:var(--bgp-delay,0s)}
@media (prefers-reduced-motion:reduce){.bg-paths path{animation:none;stroke-dasharray:none;opacity:.24}}

/* ---------- 2) Aparición palabra a palabra con desenfoque -------------- */
/* La pieza clave para que un bloque de texto no se lea como un muro:
   entra por cascada al llegar a viewport en lugar de estar ya ahí. */
.fx [data-textfx] .tfx-w{display:inline-block;opacity:0;filter:blur(9px);transform:translateY(14px) scale(.97);
  transition:opacity .6s ease var(--d,0s),filter .6s ease var(--d,0s),transform .6s cubic-bezier(.22,.61,.36,1) var(--d,0s)}
.fx [data-textfx].tfx-on .tfx-w{opacity:1;filter:blur(0);transform:none}
@media (prefers-reduced-motion:reduce){.fx [data-textfx] .tfx-w{opacity:1;filter:none;transform:none;transition:none}}

/* ---------- 3) Reveal de bloque al hacer scroll ------------------------ */
.fx [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1)}
.fx [data-reveal].rv-on{opacity:1;transform:none}
.fx [data-reveal][data-delay="1"]{transition-delay:.10s}
.fx [data-reveal][data-delay="2"]{transition-delay:.20s}
.fx [data-reveal][data-delay="3"]{transition-delay:.30s}
.fx [data-reveal][data-delay="4"]{transition-delay:.40s}
@media (prefers-reduced-motion:reduce){.fx [data-reveal]{opacity:1;transform:none;transition:none}}

/* ---------- 4) La pieza se asienta al hacer scroll --------------------- */
/* Aquí había un rotateX con perspective. En Chromium, un contexto 3D con un
   descendiente que tiene overflow:hidden + border-radius deja de pintar la
   imagen: la tarjeta salía en blanco. Con transform 2D el efecto se percibe
   igual y no hay bug de composición. */
.tilt-scroll{position:relative}
.tilt-scroll__inner{transform:scale(.955) translateY(14px);
  transition:transform .12s linear;will-change:transform;transform-origin:50% 100%}
@media (prefers-reduced-motion:reduce){.tilt-scroll__inner{transform:none!important}}
@media (max-width:760px){.tilt-scroll{perspective:none}.tilt-scroll__inner{transform:none!important}}

/* ---------- 5) Malla animada para la banda CTA ------------------------- */
.mesh-cta{position:relative;overflow:hidden;isolation:isolate}
.mesh-cta::before{content:"";position:absolute;inset:-30%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38% 42% at 22% 28%, #FF5000 0%, transparent 55%),
    radial-gradient(42% 46% at 82% 22%, #c73c00 0%, transparent 58%),
    radial-gradient(46% 50% at 72% 82%, #8f2c00 0%, transparent 60%),
    radial-gradient(40% 44% at 18% 78%, #ff7a3d 0%, transparent 58%);
  filter:blur(26px) saturate(112%);
  animation:mesh-move 20s ease-in-out infinite alternate}
@keyframes mesh-move{
  0%{transform:translate3d(-3%,-2%,0) scale(1.05) rotate(0deg)}
  50%{transform:translate3d(3%,2%,0) scale(1.12) rotate(4deg)}
  100%{transform:translate3d(-2%,3%,0) scale(1.06) rotate(-3deg)}}
@media (prefers-reduced-motion:reduce){.mesh-cta::before{animation:none}}

/* ---------- 6) TypewriterLoop: palabra que muta en el titular ---------- */
.typeloop{display:inline-flex;align-items:baseline;vertical-align:baseline}
.typeloop__slot{position:relative;display:inline-flex;align-items:baseline;overflow:hidden}
.typeloop__word{display:inline-block;white-space:nowrap;padding-right:.04em;will-change:opacity,transform;color:var(--naranja)}
.typeloop__cursor{flex:none;width:.055em;min-width:3px;height:.86em;margin-left:.07em;border-radius:2px;
  align-self:center;background:var(--naranja);animation:tlBlink .9s steps(1) infinite}
@keyframes tlBlink{0%,49%{opacity:1}50%,100%{opacity:.15}}
@media (prefers-reduced-motion:reduce){.typeloop__cursor{animation:none;opacity:.6}}

/* ---------- 7) Filas que se expanden al pasar por encima --------------- */
/* Sustituye a las rejillas de tarjetas: plegado se lee de un vistazo,
   y el detalle solo aparece cuando el visitante lo pide. */
.cat-list{display:grid;gap:10px;margin:26px 0}
.cat-row{position:relative;background:#fff;border:1px solid var(--linea);border-radius:14px;
  padding:18px 26px;transition:border-color .3s,box-shadow .3s,background .3s;text-decoration:none;display:block}
.cat-row h3{margin:0;font-family:'Montserrat',sans-serif;font-size:clamp(17px,2vw,21px);color:var(--tinta);transition:color .3s}
.cat-row .cat-sub{margin:3px 0 0;font-size:13.5px;color:var(--suave);font-weight:600}
.cat-row .cat-body{max-height:0;opacity:0;overflow:hidden;margin:0;font-size:15.5px;line-height:1.62;color:var(--texto);
  transition:max-height .45s cubic-bezier(.23,1,.32,1),opacity .35s,margin .3s}
.cat-row:hover,.cat-row:focus-visible{border-color:var(--naranja);background:#fffaf7;
  box-shadow:0 16px 38px -18px rgba(255,80,0,.34);text-decoration:none}
.cat-row:hover h3,.cat-row:focus-visible h3{color:var(--naranja)}
.cat-row:hover .cat-body,.cat-row:focus-visible .cat-body{max-height:260px;opacity:1;margin-top:9px}
.cat-row::before,.cat-row::after{content:"";position:absolute;width:15px;height:15px;opacity:0;transition:opacity .3s}
.cat-row::before{top:9px;left:9px;border-top:2px solid var(--naranja);border-left:2px solid var(--naranja)}
.cat-row::after{bottom:9px;right:9px;border-bottom:2px solid var(--naranja);border-right:2px solid var(--naranja)}
.cat-row:hover::before,.cat-row:hover::after,.cat-row:focus-visible::before,.cat-row:focus-visible::after{opacity:1}
/* En táctil no hay hover: el JS abre la fila al tocarla. Si el JS no corre,
   se muestran todas abiertas para que el contenido nunca quede inaccesible. */
.cat-row.cat-open .cat-body{max-height:260px;opacity:1;margin-top:9px}
.cat-row.cat-open{border-color:var(--naranja);background:#fffaf7}
.cat-row.cat-open h3{color:var(--naranja)}
html:not(.fx) .cat-row .cat-body{max-height:none;opacity:1;margin-top:9px}

/* ---------- 8) Contador que sube al entrar en pantalla ----------------- */
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:20px;margin:0}
.cifra{text-align:center}
.cifra-n{font-family:'Montserrat',sans-serif;font-size:clamp(34px,5vw,52px);font-weight:800;
  line-height:1;letter-spacing:-.03em;color:var(--naranja);font-variant-numeric:tabular-nums}
.cifra-l{font-size:14.5px;color:var(--suave);margin-top:9px;line-height:1.45}
.section-dark .cifra-l{color:#a9a29b}

/* ---------- 9) Enlaces de zona en píldoras compactas ------------------- */
/* 27 municipios sin 27 tarjetas: una línea, se lee entero de un vistazo. */
.pills{display:flex;flex-wrap:wrap;gap:9px;margin:22px 0 6px}
.pills a{display:inline-block;padding:8px 15px;border-radius:100px;border:1px solid var(--linea);
  background:#fff;color:var(--texto);font-size:14.5px;font-weight:500;text-decoration:none;
  transition:border-color .2s,color .2s,transform .18s,box-shadow .2s}
.pills a:hover{border-color:var(--naranja);color:var(--naranja);transform:translateY(-2px);
  box-shadow:0 10px 20px -12px rgba(255,80,0,.5);text-decoration:none}
.pills a.pill-destacada{background:var(--naranja);border-color:var(--naranja);color:#fff;font-weight:700}
.pills a.pill-destacada:hover{background:var(--naranja2);color:#fff}

/* ---------- 10) Retrato con marco ------------------------------------- */
.retrato{position:relative;border-radius:18px;overflow:hidden;background:var(--crema);
  box-shadow:0 26px 60px -28px rgba(0,0,0,.45)}
.retrato img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 22%}
.retrato::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(20,17,15,.62) 100%)}
.retrato-pie{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:20px 22px;color:#fff}
.retrato-pie strong{display:block;font-family:'Montserrat',sans-serif;font-size:19px;font-weight:700;letter-spacing:-.01em}
.retrato-pie span{font-size:14px;color:rgba(255,255,255,.82)}

/* ---------- 11) Banda de sección oscura ------------------------------- */
.section-dark{background:linear-gradient(165deg,#231f1c 0%,#14110f 100%);color:#e2ddd7;
  padding:66px 0;position:relative;overflow:hidden}
.section-dark h2{color:#fff}
.section-dark p{color:#c9c2ba}
.section-dark .wrap{position:relative;z-index:1}

/* ---------- 12) Tarjeta de paso numerada ------------------------------ */
.pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin:28px 0}
.paso{position:relative;padding:24px 22px 22px;background:#fff;border:1px solid var(--linea);border-radius:14px}
.paso-n{font-family:'Montserrat',sans-serif;font-size:13px;font-weight:800;letter-spacing:.14em;
  color:var(--naranja);text-transform:uppercase;margin-bottom:9px;display:block}
.paso h3{font-family:'Montserrat',sans-serif;font-size:18px;margin:0 0 7px;color:var(--tinta)}
.paso p{font-size:15px;line-height:1.6;color:var(--suave);margin:0}
.section-dark .paso{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.11)}
.section-dark .paso h3{color:#fff}
.section-dark .paso p{color:#b8b0a8}

/* ---------- 13) Bloques propios de la home ---------------------------- */
.banda-cifras{margin:6px 0 10px;padding:34px 0 6px}
.fuente-c{text-align:center;margin:34px auto 0;max-width:56ch}

.equipo{margin:52px 0 8px}
.equipo-in{display:grid;grid-template-columns:min(400px,42%) 1fr;gap:48px;align-items:center}
.equipo-txt h2{margin-top:0}
.equipo-txt p{font-size:17.5px;line-height:1.7}
.equipo-firma{color:var(--suave);font-size:15px;margin-bottom:0}
.equipo .retrato{aspect-ratio:4/5}

.pasos-band{margin:56px 0 0}
.pasos-band h2{margin-top:0;text-align:center}
.pasos-band .pasos{max-width:1000px;margin:32px auto 0}

.zona{padding-top:52px}
.zona .pills{margin-bottom:14px}
.zona-mas a{font-weight:600}

@media (max-width:820px){
  .equipo-in{grid-template-columns:1fr;gap:28px}
  .equipo .retrato{aspect-ratio:3/2;max-height:420px}
  .equipo{margin:38px 0 4px}
}
@media (max-width:600px){
  .banda-cifras{padding:22px 0 0}
  .cifras{grid-template-columns:1fr 1fr;gap:22px 14px}
  .pasos-band{padding:48px 0}
}