/* Estudio Juridico Astrea - estilos exclusivos de la portada (index_8.html): variante de .hero con foto de fondo */
/* ---------- Hero ---------- */
  .hero{
    position:relative;
    color:var(--ivory-50);
    overflow:hidden;
    background-size:cover;background-position:78% 15%;
    padding-block:clamp(90px,14vw,150px) clamp(70px,11vw,120px);
  }
  .hero::before{
    content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(100deg, rgba(10,20,36,0.94) 0%, rgba(10,20,36,0.82) 38%, rgba(10,20,36,0.45) 75%, rgba(10,20,36,0.3) 100%);
  }
  .hero-inner{
    position:relative;z-index:2;
    max-width:640px;
  }
  .hero-eyebrow{color:var(--gold-300,#d9bd7d);}
  .hero h1{
    color:var(--ivory-50);
    font-size:clamp(2.15rem,4.4vw,3.4rem);
    line-height:1.12;
    margin-top:14px;
  }
  .hero h1 em{color:var(--gold-400);font-style:italic;}
  .hero h1 .hero-brand{
    display:block;
    text-transform:uppercase;letter-spacing:0.06em;
    font-weight:600;line-height:1;
    font-size:1.25em;
  }
  .hero h1 .hero-claim{
    display:block;margin-top:0.35em;
    font-style:italic;font-weight:500;
    font-size:0.72em;line-height:1.2;
    color:rgba(250,247,241,0.92);
  }
  .hero-meet{
    display:flex;align-items:center;gap:10px;margin-top:16px;
    color:var(--gold-300,#d9bd7d);font-size:0.95rem;letter-spacing:0.02em;
  }
  .hero-meet svg{flex-shrink:0;}
  .hero p.lead{
    margin-top:20px;max-width:46ch;
    font-size:1.08rem;color:#d8ddE4;color:rgba(250,247,241,0.82);
  }
  .hero-tags{display:flex;gap:10px 14px;margin-top:26px;align-items:flex-start;}
  .tag-col{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0;}
  @media (max-width:480px){
    .hero-tags{gap:8px 10px;}
    .tag-col{gap:8px;}
    .hero-tags .tag{font-size:0.68rem;padding:6px 10px;letter-spacing:0;border-radius:16px;line-height:1.3;}
  }
  .tag{
    border:1px solid var(--line-on-navy);
    border-radius:100px;padding:7px 16px;
    font-size:0.78rem;letter-spacing:0.04em;
    color:var(--gold-200);
  }
  .hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;}


  
  /* Fotos de fondo que rotan sobre la foto original del hero (crossfade suave).
     Cuando ninguna esta activa se ve la foto original de la estatua. */
  .hero-slides{position:absolute;inset:0;z-index:0;}
  .hero-slide{
    position:absolute;inset:0;
    background-size:cover;background-position:center;
    opacity:0;transition:opacity 1.6s ease;
  }
  .hero-slide.is-active{opacity:1;}
  @media (prefers-reduced-motion:reduce){.hero-slide{transition:none;}}

  /* Testimonios reales: el alto del carrusel se adapta al testimonio mas largo
     (todas las slides se apilan en la misma celda de la grilla). */
  .com-track{display:grid;min-height:0;}
  .com-slide{position:relative;inset:auto;grid-area:1/1;border-style:solid;padding:30px 26px;gap:14px;}
  .com-quote{font-family:'Playfair Display',Georgia,serif;font-size:1.05rem;line-height:1.5;color:var(--ink-600);}
  .com-context{font-size:0.8rem;line-height:1.6;color:var(--ink-400);max-width:48ch;margin:0;}
  .com-author{flex-direction:column;gap:2px;}
  .com-origin{font-size:0.74rem;color:var(--gold-500);letter-spacing:0.02em;}
  @media (max-width:480px){.com-carousel{gap:8px;} .com-slide{padding:24px 16px;} .com-arrow{width:32px;height:32px;}}