/* ═══ HERO VISUAL ═══════════════════════════════════════════════════════════
   La columna derecha de los heros que estaban vacios (2026-10-10). Nico, sobre
   /servicios/: «aqui faltan recursos visuales, elementos graficos».

   Lo genera _migracion/genera-hero-visual.py (bloque entre <!-- hv --> y
   <!-- /hv -->, clase .hero--hv en la seccion). Solo se enlaza en estas
   paginas: /servicios/, /blog/, /cita/ y las cinco /abogados-<ciudad>/, en
   los cinco idiomas.

   Reglas que se cumplen aqui y no se rompen al tocarlo:
   · Nada de filetes ni barras finas a un lado de las cajas (regla de Nico).
   · Animacion solo con transform y opacity; con movimiento reducido, quieto.
   · Medidas reservadas (width/height en los svg, aspect-ratio en el mapa):
     CLS 0. Nada de esto es el LCP: en movil el LCP es la entradilla.
   ═══════════════════════════════════════════════════════════════════════════ */

.hv-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@keyframes hv-entra {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
}
@keyframes hv-aparece { from { opacity: 0; } }
@keyframes hv-crece { from { opacity: 0; transform: scale(0.2); } }
@keyframes hv-onda {
  0%   { opacity: 0.45; transform: scale(0.5); }
  70%  { opacity: 0; transform: scale(1.6); }
  100% { opacity: 0; transform: scale(1.6); }
}

/* ── Disposicion: dos columnas desde 900 px; debajo, el grafico va despues
   del texto (y de los botones), asi que nunca los empuja. ── */
.hero--hv .hv { margin-top: var(--esp-6); min-width: 0; }

@media (min-width: 900px) {
  .hero--hv:not(.cita-franja) > .contenedor {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--esp-8);
    align-items: center;
  }
  .hero--hv .hv { margin-top: 0; justify-self: end; width: 100%; }
  /* El mosaico necesita media pantalla: con 0,85 fr los nombres largos
     («Responsabilidad civil») no caben en la pieza sin partirse. */
  .hero--hv:has(.hv-areas) > .contenedor { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}


/* ═══ 1. /servicios/: mosaico de las nueve areas ══════════════════════════ */

.hv-areas__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.hv-areas__lista > li {
  animation: hv-entra 520ms cubic-bezier(0.2, 0, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 55ms + 120ms);
}
.hv-area {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--esp-3);
  height: 100%;
  min-height: 44px;
  aspect-ratio: 1 / 0.82;
  padding: var(--esp-4);
  background: var(--fondo-alt);
  color: var(--tinta);
  text-decoration: none;
  /* El chaflan es la firma de las tarjetas de area: aqui son areas. */
  clip-path: var(--clip-chafla);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--trans), color var(--trans), transform var(--trans);
}
.hv-area--fuerte { background: var(--fosc); color: #FFFFFF; }
.hv-area__ico {
  width: 28px; height: 28px;
  flex: 0 0 auto;
  color: var(--verd);
  transition: transform var(--trans-lenta), color var(--trans);
}
.hv-area--fuerte .hv-area__ico { color: var(--verd-clar); }
.hv-area__nombre {
  font-family: var(--font-titular);
  font-weight: var(--peso-semi);
  font-size: 0.9375rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.hv-area:hover {
  background: var(--verd);
  color: #FFFFFF;
  transform: translateY(-3px);
}
.hv-area:hover .hv-area__ico { color: #FFFFFF; transform: scale(1.12); }
.hv-area:active { transform: translateY(0) scale(0.98); transition-duration: 80ms; }
/* El clip-path recorta cualquier anillo exterior: el foco va por dentro. */
.hv-area:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: -6px;
}
.hv-area--fuerte:focus-visible { outline-color: var(--verd-clar); }

@media (min-width: 900px) {
  .hv-areas { max-width: 540px; }
}
@media (min-width: 1200px) {
  .hv-area__nombre { font-size: 1rem; }
}

/* Movil y tablet: una tira horizontal que llega a los bordes de la pantalla;
   la pieza cortada en el canto dice que sigue. Scroll nativo, sin JS. */
@media (max-width: 899.98px) {
  .hv-areas { margin-inline: calc(var(--gutter) * -1); }
  .hv-areas__lista {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    padding-inline: var(--gutter);
    padding-block: 4px;
    scrollbar-width: none;
  }
  .hv-areas__lista::-webkit-scrollbar { display: none; }
  .hv-areas__lista > li { flex: 0 0 124px; scroll-snap-align: start; }
  .hv-area { aspect-ratio: auto; height: 108px; padding: var(--esp-3); }
  .hv-area__nombre { font-size: 0.875rem; }
}


/* ═══ 2. /abogados-<ciudad>/: minimapa ════════════════════════════════════ */

.hv-mapa { margin-inline: 0; direction: ltr; }
.hv-mapa__lienzo {
  position: relative;
  border-radius: var(--radio-lg);
  aspect-ratio: 1;
  animation: hv-aparece 700ms ease-out both;
}
.hv-mapa__dibujo { width: 100%; height: auto; overflow: visible; }
.hv-mapa__resto  { fill: var(--fondo-alt); stroke: #FFFFFF; stroke-width: 1.4; stroke-linejoin: round; }
.hv-mapa__bcn    { fill: var(--linea); stroke: #FFFFFF; stroke-width: 1.4; stroke-linejoin: round; }
.hv-mapa__ciudad { fill: #C3CB86; stroke: #FFFFFF; stroke-width: 1.4; stroke-linejoin: round; }
.hv-mapa__arco {
  fill: none;
  stroke: var(--verd);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-dasharray: 0 8;
  animation: hv-aparece 900ms 500ms ease-out both;
}
.hv-mapa__punto  { fill: var(--verd); stroke: #FFFFFF; stroke-width: 3; }
.hv-mapa__origen { fill: var(--verd-fosc); stroke: #FFFFFF; stroke-width: 2; }
.hv-mapa__punto, .hv-mapa__origen {
  transform-box: fill-box;
  transform-origin: center;
  animation: hv-crece 420ms 300ms cubic-bezier(0.2, 0, 0.2, 1.4) both;
}
.hv-mapa__onda {
  fill: var(--verd);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: hv-onda 2.8s 1s ease-out 3;
}

.hv-mapa__rotulo {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: max-content;
  max-width: 10.5em;
  font-family: var(--font-titular);
  font-size: 0.875rem;
  font-weight: var(--peso-semi);
  line-height: 1.15;
  color: var(--tinta);
  /* Halo blanco, como en los mapas: se lee sobre cualquier relleno. */
  text-shadow: 0 0 3px #FFFFFF, 0 0 3px #FFFFFF, 0 0 6px #FFFFFF, 0 0 8px #FFFFFF;
  pointer-events: none;
  animation: hv-aparece 500ms 450ms ease-out both;
}
.hv-mapa__rotulo--der { transform: translate(12px, -50%); }
.hv-mapa__rotulo--izq { transform: translate(calc(-100% - 12px), -50%); text-align: right; }
.hv-mapa__rotulo--arriba { transform: translate(-50%, calc(-100% - 12px)); text-align: center; }
.hv-mapa__rotulo--abajo  { transform: translate(-50%, 12px); text-align: center; }
.hv-mapa__rotulo--despacho { color: var(--verd-fosc); font-weight: var(--peso-fuerte); }
.hv-mapa__rotulo--bcn {
  transform: translate(-50%, -50%);
  font-size: 0.6875rem;
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--tinta-3);
}
.hv-mapa__fuente {
  margin-top: var(--esp-1);
  font-size: 0.6875rem;
  line-height: 1.3;
  color: var(--tinta-3);
  text-align: right;
}

@media (max-width: 899.98px) {
  .hv-mapa { max-width: 340px; }
}
@media (min-width: 900px) {
  .hv-mapa { max-width: 460px; }
  .hv-mapa__rotulo { font-size: 0.9375rem; }
  .hv-mapa__rotulo--bcn { font-size: 0.75rem; }
}


/* ═══ 3. /blog/: guias por bloque, una casilla por guia ═══════════════════ */

.hv-guias {
  padding: var(--esp-4);
  background: var(--fondo);
  border-radius: var(--radio-lg);
}
.hv-guias__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.hv-guias__lista > li {
  animation: hv-entra 480ms cubic-bezier(0.2, 0, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 50ms + 120ms);
}
.hv-guia {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--esp-3);
  min-height: 44px;
  padding: var(--esp-2) var(--esp-3);
  border-radius: var(--radio);
  color: var(--tinta);
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--trans);
}
.hv-guia__ico { width: 22px; height: 22px; color: var(--verd); transition: transform var(--trans-lenta); }
.hv-guia__nombre { font-size: 0.9375rem; font-weight: var(--peso-medio); line-height: 1.3; }
.hv-guia__casillas { display: flex; gap: 4px; }
.hv-guia__casillas i {
  display: block;
  width: 13px; height: 13px;
  border-radius: 2px;
  background: var(--verd);
  transform-origin: center;
  animation: hv-crece 360ms cubic-bezier(0.2, 0, 0.2, 1.3) both;
  animation-delay: calc(var(--i, 0) * 50ms + 380ms);
}
.hv-guia:hover { background: var(--superficie); }
.hv-guia:hover .hv-guia__ico { transform: translateX(2px) scale(1.08); }
[dir="rtl"] .hv-guia:hover .hv-guia__ico { transform: translateX(-2px) scale(1.08); }
.hv-guia:focus-visible { outline: 3px solid var(--focus); outline-offset: 0; }

/* En movil el blog va directo a su listado: el grafico no sale. */
@media (max-width: 899.98px) {
  .hv-guias { display: none; }
}
@media (min-width: 900px) {
  .hv-guias { max-width: 460px; }
}


/* ═══ 4. /cita/: tres semanas de lunes a viernes, un dia elegido ══════════
   Decorativo y pequeno: no compite con el asistente. Solo desde 1000 px,
   donde el hero ya tiene columna derecha (los datos de la cita); debajo, el
   hero de /cita/ tiene que ser una franja y no sale. */
.hv-semana { display: none; }

@media (min-width: 1000px) {
  .hero--hv.cita-franja .cita-franja__interior {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--esp-8);
    row-gap: var(--esp-4);
    align-items: start;
  }
  .hero--hv.cita-franja .hero__contenido { grid-row: 1 / span 2; }
  .hero--hv.cita-franja .hv-semana { display: block; margin-top: 0; grid-column: 2; align-self: end; }
  .hero--hv.cita-franja .cita-datos { grid-column: 2; align-self: start; }

  .hv-semana__rejilla {
    display: grid;
    grid-template-columns: repeat(7, 26px);
    gap: 6px;
  }
  .hv-dia {
    width: 26px; height: 26px;
    border-radius: 3px;
    background: var(--linea);
    animation: hv-aparece 300ms ease-out both;
    animation-delay: calc(var(--i, 0) * 22ms + 100ms);
  }
  /* Sabado y domingo no hay citas: casilla casi borrada. */
  .hv-dia--finde { background: var(--fondo-alt); opacity: 0.55; }
  .hv-dia--elegido {
    background: var(--verd);
    box-shadow: 0 0 0 3px var(--verd-suau);
    animation-name: hv-crece;
    animation-duration: 420ms;
    animation-timing-function: cubic-bezier(0.2, 0, 0.2, 1.4);
    animation-delay: 700ms;
  }
}


/* ═══ Movimiento reducido: todo quieto y visible ══════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .hv *, .hv, .hv-mapa__lienzo {
    animation: none !important;
    transition: none !important;
  }
  .hv-area:hover, .hv-area:hover .hv-area__ico, .hv-guia:hover .hv-guia__ico { transform: none; }
  .hv-mapa__onda { display: none; }
}