/* index.html */

    .hero {
      min-height: 100vh;
      background:
        radial-gradient(ellipse at 70% 15%, rgba(179,58,58,.10) 0%, transparent 55%),
        var(--navy-d);
      color: var(--cream);
      display: flex; align-items: center;
      position: relative; overflow: hidden;
    }
    .hero-inner {
      position: relative; z-index: 2;
      max-width: 1080px; margin: 0 auto; padding: 0 60px; width: 100%;
    }
    .seccion-titulo { font-size: clamp(28px,3.6vw,44px); margin-bottom: 34px; color: var(--navy); }
    .hero h1 { margin: 26px 0 38px; line-height: 1; }
    .hero-nombre {
      display: block;
      font-size: clamp(46px, 7vw, 92px);
      font-weight: 500; letter-spacing: .045em;
      padding-bottom: 22px; margin-bottom: 18px;
      border-bottom: 1px solid rgba(247,245,240,.28);
      max-width: max-content;
    }
    .hero-abogados {
      display: block;
      font-family: "Inter", sans-serif;
      font-size: clamp(13px, 1.6vw, 18px);
      font-weight: 300; letter-spacing: .55em;
      text-transform: uppercase; opacity: .75;
      padding-left: 3px;
    }
    .hero .lede { max-width: 520px; font-size: 15.5px; line-height: 1.8; opacity: .82; }
    .hero-right { position: relative; overflow: hidden; }
    .hero-photo {
      position: absolute; inset: 0; width: 100%; height: 100%;
      object-fit: cover; filter: saturate(0.7) brightness(0.85);
    }
    .claim { background: var(--stone); color: var(--ink); }
    .claim .shell { max-width: 880px; text-align: center; }
    .claim h2 {
      font-size: clamp(26px, 3.4vw, 40px); line-height: 1.25;
      margin-bottom: 26px;
    }
    .claim p { font-size: 14.5px; opacity: .75; line-height: 1.85; max-width: 640px; margin: 0 auto; }

    .photo-band { position: relative; height: 420px; overflow: hidden; }
    .photo-band img {
      position: absolute; inset: 0; width: 100%; height: 100%;
      object-fit: cover; object-position: center 35%;
      filter: saturate(0.55) brightness(0.6);
    }
    .photo-band::after {
      content: ""; position: absolute; inset: 0;
      background: linear-gradient(to top, rgba(0,22,35,.75) 0%, rgba(0,22,35,.15) 45%, rgba(0,22,35,.4) 100%);
    }
    .photo-band .caption {
      position: absolute; left: 60px; bottom: 32px; z-index: 2;
      color: var(--cream); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
      opacity: .7;
    }
    .areas-teaser { background: var(--stone); color: var(--ink); padding-bottom: 90px; }
    .tag-group { margin-bottom: 30px; }
    .tag-label {
      display: block; font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
      color: var(--garnet); margin-bottom: 14px; font-weight: 500;
    }
    .tag-list { display: flex; flex-wrap: wrap; gap: 10px; }
    .tag-list a {
      display: inline-block; background: #FFFFFF; color: var(--navy);
      text-decoration: none; font-size: 13px; font-weight: 400;
      padding: 11px 20px; border: 1px solid var(--rule-l);
      transition: background .2s, border-color .2s, color .2s;
    }
    .tag-list a:hover { background: var(--navy); color: var(--cream); border-color: var(--navy); }
    .closing-band {
      background: var(--navy);
      color: var(--cream);
      border-top: 1px solid var(--rule);
    }
    .closing-band .shell { max-width: 640px; text-align: center; }
    .closing-band .eyebrow { justify-content: center; }
    .closing-band h2 { font-size: clamp(28px, 3.6vw, 42px); line-height: 1.15; margin-bottom: 20px; }
    .closing-band p { font-size: 14px; line-height: 1.85; opacity: .6; margin: 0 auto 34px; max-width: 480px; }
    @media (max-width: 820px) {
      .hero { min-height: 88vh; }
      .hero-inner { padding: 0 22px; }
      .hero-nombre { font-size: clamp(38px, 11vw, 54px); padding-bottom: 16px; }
      .hero-abogados { letter-spacing: .4em; }
      .hero .lede { font-size: 14.5px; }
      .tag-list a { padding: 10px 16px; font-size: 12.5px; }
      .areas-teaser { padding-bottom: 56px; }
      .photo-band { height: 220px; }
      .photo-band .caption { left: 22px; bottom: 18px; }
      .areas-teaser--alt { padding-top: 56px; }
    }