/* Estudio Juridico Astrea - estilos exclusivos de las paginas de servicio: variante de .hero + bloques de detalle de servicio */
/* Nota: se removio CSS heredado de .hero/.hero-emblem/.hero-photo/.hero-deco que no correspondia
   a ningun elemento del markup real de estas paginas (usan .service-hero). Verificado por grep
   antes de eliminarlo: no tiene efecto visual, es limpieza de codigo muerto. */

  /* ---------- Service detail pages ---------- */
  .service-hero{
    position:relative;min-height:360px;display:flex;align-items:flex-end;
    padding-block:56px 44px;color:var(--ivory-50);
    background-size:cover;background-position:center;
  }
  .service-hero::before{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg, rgba(56,9,20,0.5), rgba(56,9,20,0.9));
  }
  .service-hero .container{position:relative;z-index:1;}
  .breadcrumb{font-size:0.82rem;color:rgba(250,247,241,0.75);margin-bottom:16px;}
  .breadcrumb a{color:rgba(250,247,241,0.75);text-decoration:none;}
  .breadcrumb a:hover{color:var(--gold-300,#d9bd7d);}
  .breadcrumb .sep{margin:0 7px;opacity:.55;}
  .service-hero h1{color:var(--ivory-50);font-size:clamp(2rem,4vw,2.7rem);}
  .service-hero p.lead{margin-top:14px;max-width:58ch;color:rgba(250,247,241,0.88);font-size:1.06rem;}
  .service-hero .hero-ctas{margin-top:28px;}

  .service-content{max-width:720px;}
  .service-content p{color:var(--ink-600);margin-bottom:18px;font-size:1.03rem;}
  .service-content p:last-child{margin-bottom:0;}

  .service-cta-card{
    margin-top:48px;padding:32px 30px;background:var(--ivory-100);
    border:1px solid var(--line);border-radius:var(--radius-m);
    display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;
  }
  .service-cta-card p{margin:0;color:var(--ink-900);font-family:"Playfair Display",serif;font-size:1.2rem;max-width:38ch;}

  .other-services{margin-top:56px;}
  .other-services h4{
    font-size:0.8rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-400);
    margin-bottom:14px;font-family:"Jost",sans-serif;font-weight:600;
  }
  .other-services-list{display:flex;flex-wrap:wrap;gap:10px;}
  .other-services-list a{
    font-size:0.86rem;padding:9px 18px;border:1px solid var(--line);border-radius:100px;
    text-decoration:none;color:var(--ink-600);
  }
  .other-services-list a:hover{border-color:var(--gold-500);color:var(--navy-900);}


  /* ---------- Tarjetas de subservicios (cuadritos) ----------
     Fondo navy, icono de balanza, titulo, texto opcional y boton contorneado, como la referencia
     de la clienta. Flex + wrap para que la ultima fila quede centrada cuando no completa 3. */
  .sub-head{margin-top:56px;margin-bottom:32px;}
  .sub-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:22px;}
  .sub-card{
    flex:0 1 calc((100% - 44px) / 3);
    background:var(--navy-900);color:var(--ivory-50);
    border:1px solid var(--line-on-navy);border-radius:var(--radius-m);
    padding:34px 26px 28px;
    display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;
    transition:opacity .7s ease, transform .45s ease, border-color .25s ease, box-shadow .25s ease;
  }
  .sub-card:hover{
    transform:translateY(-4px);
    border-color:var(--gold-500);
    box-shadow:0 16px 32px -20px rgba(0,0,0,0.5);
  }
  .sub-card.reveal:nth-child(3n+2){transition-delay:.06s,0s,0s,0s;}
  .sub-card.reveal:nth-child(3n+3){transition-delay:.12s,0s,0s,0s;}
  .sub-icon{width:42px;height:42px;color:var(--gold-400);flex-shrink:0;}
  .sub-card h3{color:var(--ivory-50);font-size:1.22rem;line-height:1.25;}
  .sub-card p{color:rgba(250,247,241,0.75);font-size:0.95rem;}
  .sub-btn{
    display:flex;align-items:center;margin-top:auto;width:100%;justify-content:center;
    padding:12px 22px;border-radius:6px;
    border:1px solid rgba(250,247,241,0.55);color:var(--ivory-50);
    font-family:"Jost",sans-serif;font-weight:500;font-size:0.95rem;text-decoration:none;
    transition:background-color .2s ease, border-color .2s ease, color .2s ease;
  }
  .sub-btn{min-height:44px;}
  .sub-btn:hover{background:rgba(255,255,255,0.07);border-color:var(--gold-400);color:var(--gold-200);}
  @media (max-width:860px){.sub-card{flex-basis:calc((100% - 22px) / 2);}}
  @media (max-width:560px){.sub-card{flex-basis:100%;}}
  @media (prefers-reduced-motion:reduce){.sub-card{transition:none;} .sub-card:hover{transform:none;}}

  @media (max-width:600px){.service-hero{min-height:300px;}}