/* ==========================================================================
   Servicios — grilla asimétrica y proceso

   El hero usa .zr-page-hero, el mismo que Quiénes somos, Contacto y
   Actualidad. Solo se le añade la fila de datos.
   ========================================================================== */

/* -------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */

/* El título de esta página es largo: sin límite ocupa una sola línea y llega
   hasta la retícula. Se parte en dos y deja el costado libre.
   (servicios.css solo se carga aquí, así que no afecta a las demás.) */
.zr-page-hero h1{max-width:14ch;}

/* -------------------------------------------------------------------------
   Datos del hero
   ------------------------------------------------------------------------- */

/*
   La fila de datos hace que este hero sea ~180px más alto que los otros
   page-hero. El SVG del trazo escala con el ancho disponible, así que en
   pantallas anchas crecía hasta pasarse por encima de las cifras. Se le
   recorta el contenedor para que solo ocupe la franja del texto: sigue
   entrando a lo ancho igual que antes, pero deja de crecer hacia abajo.
*/
.zr-page-hero .zr-trazo{bottom:var(--alto-datos,176px);}

.zr-serv-hero-datos{
  display:flex;gap:56px;flex-wrap:wrap;
  margin-top:40px;padding-top:26px;
  border-top:1px solid var(--hair-oscuro);
}
.zr-serv-hero-datos .n{
  display:block;
  font-family:'Instrument Serif',Georgia,serif;
  font-size:2.3rem;line-height:1;color:var(--acento-claro);
}
.zr-serv-hero-datos .l{
  display:block;margin-top:8px;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(241,245,250,.58);
}

/* -------------------------------------------------------------------------
   Filtro por área
   ------------------------------------------------------------------------- */

.zr-serv-filtro{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:72px;}

.zr-serv-filtro .chip{
  display:inline-flex;align-items:center;gap:9px;
  padding:12px 22px;
  background:transparent;
  border:1px solid var(--hair-fuerte);border-radius:999px;
  font:inherit;font-size:.88rem;font-weight:500;color:var(--tinta-2);
  cursor:pointer;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.zr-serv-filtro .chip .n{
  font-family:'Instrument Serif',Georgia,serif;font-size:.95rem;
  color:var(--acento-oscuro);transition:color .25s ease;
}
.zr-serv-filtro .chip:hover{border-color:var(--acento);color:var(--acento-oscuro);}
.zr-serv-filtro .chip.activo{
  background:var(--azul);border-color:var(--azul);color:var(--papel);
}
.zr-serv-filtro .chip.activo .n{color:var(--acento-claro);}

/* -------------------------------------------------------------------------
   Bloques por área
   ------------------------------------------------------------------------- */

.zr-serv-bloque + .zr-serv-bloque{margin-top:104px;}
.zr-serv-bloque[hidden]{display:none;}

.zr-serv-bloque-head{margin-bottom:44px;}
.zr-serv-bloque-head p{
  margin-top:18px;font-size:1.12rem;color:var(--tinta-2);max-width:52ch;
}

/* -------------------------------------------------------------------------
   Grilla asimétrica
   ------------------------------------------------------------------------- */

.zr-bento{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:20px;
}

.zr-tarjeta{
  position:relative;
  grid-column:span 2;
  display:flex;flex-direction:column;
  min-height:290px;
  padding:34px 32px;
  background:var(--blanco);
  border:1px solid var(--hair);
  overflow:hidden;
  transition:transform .4s cubic-bezier(.2,.8,.3,1),
             border-color .4s ease,
             background .4s ease;
}
/* Las dos primeras de cada bloque mandan */
.zr-tarjeta.ancha{grid-column:span 3;min-height:330px;}

/* La última, si quedaría sola en su fila, se estira y pasa a horizontal */
.zr-tarjeta.completa{
  grid-column:1 / -1;min-height:0;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) minmax(0,1.1fr);
  grid-template-areas:"ico titulo texto";
  align-items:center;
  gap:0 36px;
  padding:32px;
}
.zr-tarjeta.completa .icono{grid-area:ico;margin-bottom:0;}
.zr-tarjeta.completa h3{grid-area:titulo;margin-bottom:0;font-size:1.6rem;}
.zr-tarjeta.completa > p{grid-area:texto;flex:none;}
.zr-tarjeta.completa .pie{display:none;}
.zr-tarjeta.completa .cifra{top:50%;transform:translateY(-50%);right:32px;}
.zr-tarjeta.completa:hover .cifra,
.zr-tarjeta.completa:focus-visible .cifra{transform:translateY(calc(-50% - 4px));}

.zr-tarjeta:hover,
.zr-tarjeta:focus-visible{
  transform:translateY(-6px);
  border-color:rgba(44,111,181,.42);
  outline:none;
}

/* Halo que sigue al cursor. Las coordenadas vienen de servicios.js. */
.zr-tarjeta .halo{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(
    340px circle at var(--mx,50%) var(--my,0%),
    rgba(44,111,181,.13),
    transparent 68%
  );
  opacity:0;transition:opacity .4s ease;
}
.zr-tarjeta:hover .halo,
.zr-tarjeta:focus-visible .halo{opacity:1;}

/* Filete superior que se traza de izquierda a derecha */
.zr-tarjeta::after{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--acento),var(--acento-claro));
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s cubic-bezier(.2,.8,.3,1);
}
.zr-tarjeta:hover::after,
.zr-tarjeta:focus-visible::after{transform:scaleX(1);}

.zr-tarjeta .cifra{
  position:absolute;top:14px;right:22px;
  font-family:'Instrument Serif',Georgia,serif;
  font-size:4.6rem;line-height:1;
  color:var(--azul);opacity:.07;
  transition:opacity .4s ease,transform .5s cubic-bezier(.2,.8,.3,1);
}
.zr-tarjeta:hover .cifra,
.zr-tarjeta:focus-visible .cifra{opacity:.14;transform:translateY(-4px);}

.zr-tarjeta .icono{
  position:relative;z-index:2;
  width:52px;height:52px;
  display:flex;align-items:center;justify-content:center;
  color:var(--acento);
  border:1px solid var(--hair);
  margin-bottom:24px;
  transition:background .4s ease,color .4s ease,border-color .4s ease;
}
.zr-tarjeta .icono svg{width:24px;height:24px;}
.zr-tarjeta:hover .icono,
.zr-tarjeta:focus-visible .icono{
  background:var(--azul);border-color:var(--azul);color:var(--papel);
}

.zr-tarjeta h3{
  position:relative;z-index:2;
  font-size:1.55rem;line-height:1.12;margin-bottom:14px;
  transition:color .35s ease;
}
.zr-tarjeta.ancha h3{font-size:1.85rem;}
.zr-tarjeta:hover h3,
.zr-tarjeta:focus-visible h3{color:var(--azul);}

.zr-tarjeta > p{
  position:relative;z-index:2;
  color:var(--tinta-2);font-size:.96rem;line-height:1.62;
  flex:1;
}

.zr-tarjeta .pie{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:26px;padding-top:18px;
  border-top:1px solid var(--hair);
}
.zr-tarjeta .etiqueta{
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tinta-3);
}
.zr-tarjeta .flecha{
  width:20px;height:20px;color:var(--acento);
  opacity:0;transform:translate(-6px,6px);
  transition:opacity .35s ease,transform .35s cubic-bezier(.2,.8,.3,1);
}
.zr-tarjeta:hover .flecha,
.zr-tarjeta:focus-visible .flecha{opacity:1;transform:none;}

@media(prefers-reduced-motion:reduce){
  .zr-tarjeta,.zr-tarjeta::after,.zr-tarjeta .cifra,
  .zr-tarjeta .flecha,.zr-tarjeta .halo{transition:none;}
  .zr-tarjeta:hover,.zr-tarjeta:focus-visible{transform:none;}
}

/* -------------------------------------------------------------------------
   Proceso
   ------------------------------------------------------------------------- */

.zr-pasos{display:grid;grid-template-columns:repeat(4,1fr);gap:0;list-style:none;padding:0;}

.zr-paso{position:relative;padding:56px 28px 0 0;}

/* Línea que une los pasos: se traza al entrar en viewport */
.zr-paso .linea{
  position:absolute;top:9px;left:0;right:0;height:1px;
  background:var(--hair-fuerte);
  transform:scaleX(0);transform-origin:left;
  transition:transform .9s cubic-bezier(.2,.8,.3,1);
  transition-delay:calc(var(--i) * .16s);
}
.zr-paso:last-child .linea{right:28px;}
.reveal.in .zr-paso .linea{transform:scaleX(1);}

.zr-paso .punto{
  position:absolute;top:4px;left:0;
  width:11px;height:11px;border-radius:999px;
  background:var(--papel);border:2px solid var(--acento);
  transform:scale(0);
  transition:transform .5s cubic-bezier(.2,.9,.3,1.2);
  transition-delay:calc(var(--i) * .16s + .25s);
}
.reveal.in .zr-paso .punto{transform:scale(1);}

.zr-paso .num{
  display:block;
  font-family:'Instrument Serif',Georgia,serif;
  font-size:1.1rem;color:var(--acento-oscuro);margin-bottom:12px;
}
.zr-paso h3{font-size:1.32rem;line-height:1.18;margin-bottom:12px;}
.zr-paso p{color:var(--tinta-2);font-size:.95rem;line-height:1.62;}

@media(prefers-reduced-motion:reduce){
  .zr-paso .linea,.zr-paso .punto{transition:none;transform:none;}
  .zr-paso .punto{transform:scale(1);}
}

/* -------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */

@media(max-width:1080px){
  .zr-bento{grid-template-columns:repeat(4,1fr);}
  .zr-tarjeta{grid-column:span 2;}
  .zr-tarjeta.ancha{grid-column:span 2;min-height:290px;}
  .zr-tarjeta.ancha h3{font-size:1.55rem;}
  .zr-tarjeta.completa{
    grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:"ico titulo" ".  texto";
    gap:14px 24px;align-items:start;
  }
  .zr-tarjeta.completa .cifra{display:none;}
  .zr-pasos{grid-template-columns:repeat(2,1fr);gap:0 0;}
  .zr-paso{padding-bottom:34px;}
}

@media(max-width:760px){
  .zr-serv-hero-datos{gap:0;margin-top:32px;}
  .zr-serv-hero-datos .dato{
    flex:1 1 100%;display:flex;align-items:baseline;gap:16px;
    padding:14px 0;border-bottom:1px solid var(--hair-oscuro);
  }
  .zr-serv-hero-datos .dato:last-child{border-bottom:0;}
  .zr-serv-hero-datos .n{font-size:1.7rem;}
  .zr-serv-hero-datos .l{margin-top:0;}

  .zr-bento{grid-template-columns:1fr;gap:16px;}
  .zr-tarjeta,.zr-tarjeta.ancha{grid-column:span 1;min-height:0;padding:28px 24px;}
  .zr-tarjeta .cifra{font-size:3.4rem;}
  .zr-tarjeta.completa{
    grid-column:span 1;display:flex;flex-direction:column;padding:28px 24px;
  }
  .zr-tarjeta.completa .icono{margin-bottom:24px;}
  .zr-tarjeta.completa h3{margin-bottom:14px;font-size:1.45rem;}

  .zr-pasos{grid-template-columns:1fr;}
  .zr-paso{padding:0 0 0 34px;}
  /* En una columna la línea pasa a ser vertical */
  .zr-paso .linea{
    top:0;bottom:0;left:5px;right:auto;width:1px;height:auto;
    transform:scaleY(0);transform-origin:top;
  }
  .reveal.in .zr-paso .linea{transform:scaleY(1);}
  .zr-paso:last-child .linea{right:auto;bottom:auto;height:22px;}
  .zr-paso .punto{top:3px;left:0;}
  .zr-paso + .zr-paso{margin-top:34px;}

  .zr-serv-bloque + .zr-serv-bloque{margin-top:72px;}
  .zr-serv-filtro{margin-bottom:48px;}
}