/* ==========================================================
   MARCHENA ÁVILA & ABOGADOS ASOCIADOS
   SERVICIOS
   ========================================================== */


/* ==========================================================
   01. HERO SERVICIOS
   ========================================================== */

.services-hero {
  position: relative;
  display: flex;
  min-height: 420px;
  overflow: hidden;
  align-items: center;
  background: var(--navy-2);
}


/* ==========================================================
   IMAGEN HERO
   ========================================================== */

.services-hero-media,
.services-hero-overlay {
  position: absolute;
  inset: 0;
}

.services-hero-media {
  z-index: 0;
}

.services-hero-media img {
  display: block;
  width: 100%;
  height: 100%;

  object-fit: cover;

  /*
    Puedes mover este valor si quieres
    mostrar otra parte de la fotografía.
  */
  object-position: 56% 48%;

  filter:
    saturate(0.8) contrast(1.04);
}


/* ==========================================================
   OVERLAY HERO
   ========================================================== */

.services-hero-overlay {
  z-index: 1;

  background:
    linear-gradient(90deg,
      rgba(5, 20, 36, 0.96) 0%,
      rgba(5, 20, 36, 0.90) 30%,
      rgba(5, 20, 36, 0.67) 58%,
      rgba(5, 20, 36, 0.28) 100%);
}


/* ==========================================================
   DECORACIÓN HERO
   ========================================================== */

.services-hero-decoration {
  position: absolute;

  top: 50%;
  right: -115px;

  z-index: 2;

  width: 340px;
  height: 340px;

  border:
    1px solid rgba(216, 181, 107, 0.16);

  transform:
    translateY(-50%) rotate(45deg);

  pointer-events: none;
}

.services-hero-decoration::before {
  content: "";

  position: absolute;
  inset: 39px;

  border:
    1px solid rgba(216, 181, 107, 0.08);
}

.services-hero-decoration::after {
  content: "";

  position: absolute;
  inset: 78px;

  border:
    1px solid rgba(216, 181, 107, 0.045);
}


/* ==========================================================
   CONTENEDOR HERO
   ========================================================== */

.services-hero-container {
  position: relative;
  z-index: 3;

  width: 100%;
}


/* ==========================================================
   CONTENIDO HERO
   ========================================================== */

.services-hero-content {
  max-width: 610px;

  /*
    Desplaza el bloque ligeramente hacia
    la derecha sin centrarlo por completo.
  */
  margin-left:
    clamp(35px, 4vw, 75px);

  padding:
    58px 0 62px;
}


/* ==========================================================
   ETIQUETA HERO
   ========================================================== */

.services-label {
  display: block;

  margin-bottom: 14px;

  color:
    var(--gold);

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 0.62rem;
  font-weight: 700;

  letter-spacing:
    0.18em;

  text-transform:
    uppercase;
}


/* ==========================================================
   TÍTULO HERO
   ========================================================== */

.services-hero h1 {
  max-width: 610px;

  margin: 0;

  color: #ffffff;

  font-family:
    "Playfair Display",
    serif;

  font-size:
    clamp(2.65rem, 4vw, 4.15rem);

  font-weight: 600;

  line-height: 1.03;

  letter-spacing:
    -0.03em;
}

.services-hero h1 span {
  display: block;

  color: #ffffff;

  font-family:
    "Playfair Display",
    serif;

  font-weight: 600;
}


/* ==========================================================
   LÍNEA HERO
   ========================================================== */

.services-hero-rule {
  width: 58px;
  height: 2px;

  margin:
    20px 0 17px;

  background:
    var(--gold);
}


/* ==========================================================
   TEXTO HERO
   ========================================================== */

.services-hero-content p {
  max-width: 475px;

  margin: 0;

  color:
    rgba(255, 255, 255, 0.74);

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 0.86rem;

  line-height: 1.7;
}


/* ==========================================================
   BOTÓN HERO
   ========================================================== */

.services-hero-content .btn {
  margin-top: 22px;
}


/* ==========================================================
   02. INTRODUCCIÓN
   ========================================================== */

.services-intro {
  position: relative;

  padding:
    clamp(90px, 9vw, 130px) 0 clamp(115px, 10vw, 155px);

  overflow: hidden;

  background:
    #ffffff;
}


/* Decoración */

.services-intro::before {
  content: "";

  position: absolute;

  top: -160px;
  right: -180px;

  width: 430px;
  height: 430px;

  border:
    1px solid rgba(216, 181, 107, 0.08);

  transform:
    rotate(45deg);

  pointer-events: none;
}


.services-intro-grid {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 0.88fr) minmax(0, 1.12fr);

  gap:
    clamp(65px, 9vw, 125px);

  align-items:
    start;
}


/* ==========================================================
   TÍTULOS DE SECCIÓN
   ========================================================== */

.section-label {
  display: block;

  margin-bottom: 14px;

  color:
    var(--gold);

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    0.65rem;

  font-weight:
    700;

  letter-spacing:
    0.18em;

  text-transform:
    uppercase;
}

.section-label.light {
  color:
    var(--gold-2);
}


/* ==========================================================
   INTRO - COLUMNA IZQUIERDA
   ========================================================== */

.services-intro-title h2 {
  max-width: 560px;

  margin: 0;

  color:
    var(--navy);

  font-family:
    "Playfair Display",
    serif;

  font-size:
    clamp(2.5rem, 3.8vw, 4rem);

  font-weight:
    600;

  line-height:
    1.07;

  letter-spacing:
    -0.03em;
}


/* ==========================================================
   INTRO - COLUMNA DERECHA
   ========================================================== */

.services-intro-copy {
  max-width: 600px;
}

.services-intro-lead {
  color:
    var(--navy);

  font-size:
    1rem;

  font-weight:
    500;

  line-height:
    1.85;
}

.services-intro-copy>p+p {
  margin-top: 17px;

  line-height:
    1.85;
}


/* ==========================================================
   PRINCIPIOS
   ========================================================== */

.services-principles {
  display: grid;

  margin-top: 37px;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  border-top:
    1px solid var(--line);

  border-bottom:
    1px solid var(--line);
}

.services-principles>div {
  padding:
    18px;

  border-right:
    1px solid var(--line);

  text-align:
    center;
}

.services-principles>div:first-child {
  padding-left: 0;
}

.services-principles>div:last-child {
  padding-right: 0;
  border-right: 0;
}

.services-principles span {
  display: block;

  margin-bottom: 5px;

  color:
    var(--gold);

  font-size:
    0.56rem;

  font-weight:
    700;

  letter-spacing:
    0.17em;
}

.services-principles strong {
  color:
    var(--navy);

  font-family:
    "Playfair Display",
    serif;

  font-size:
    0.96rem;

  font-weight:
    600;
}


/* ==========================================================
   03. SEPARADOR GEOMÉTRICO
   ========================================================== */

.services-divider {
  position: absolute;

  right: 0;
  bottom: 0;
  left: 0;

  z-index: 4;

  display: grid;

  height: 70px;

  grid-template-columns:
    1fr 105px 1fr;

  align-items:
    end;

  pointer-events:
    none;
}

.services-divider-left,
.services-divider-right {
  height: 70px;

  background:
    var(--navy);
}

.services-divider-left {
  clip-path:
    polygon(0 100%,
      0 72%,
      100% 100%);
}

.services-divider-right {
  clip-path:
    polygon(0 100%,
      100% 72%,
      100% 100%);
}

.services-divider-center {
  position: relative;

  height: 70px;
}

.services-divider-center::before,
.services-divider-center::after {
  content: "";

  position: absolute;

  bottom: 0;

  width: 55%;
  height: 70px;

  background:
    var(--navy);
}

.services-divider-center::before {
  left: 0;

  clip-path:
    polygon(0 100%,
      100% 0,
      100% 100%);
}

.services-divider-center::after {
  right: 0;

  clip-path:
    polygon(0 0,
      100% 100%,
      0 100%);
}

.services-divider-center span {
  position: absolute;

  bottom: 16px;
  left: 50%;

  z-index: 3;

  width: 7px;
  height: 7px;

  border-radius:
    50%;

  background:
    var(--gold);

  transform:
    translateX(-50%);
}


/* ==========================================================
   04. ÁREAS / SERVICIOS
   ========================================================== */

.practice-services {
  position: relative;

  padding:
    clamp(82px, 8vw, 115px) 0 clamp(95px, 9vw, 130px);

  overflow: hidden;

  background:
    var(--navy);
}


/* Overlay interno */

.practice-services::after {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 1;

  background:
    linear-gradient(180deg,
      rgba(0, 0, 0, 0.02),
      rgba(0, 0, 0, 0.17));

  pointer-events: none;
}


/* Patrón decorativo */

.practice-services-pattern {
  position: absolute;

  inset: 0;

  z-index: 0;

  opacity: 0.32;

  background:
    linear-gradient(125deg,
      transparent 0 30%,
      rgba(255, 255, 255, 0.025) 30% 31%,
      transparent 31% 50%,
      rgba(255, 255, 255, 0.018) 50% 51%,
      transparent 51%);

  pointer-events:
    none;
}

.practice-services .container {
  position: relative;

  z-index: 2;
}


/* ==========================================================
   ENCABEZADO SERVICIOS
   ========================================================== */

.practice-services-heading {
  max-width: 720px;

  margin:
    0 auto 55px;

  text-align:
    center;
}

.practice-services-heading h2 {
  margin: 0;

  color:
    #ffffff;

  font-family:
    "Playfair Display",
    serif;

  font-size:
    clamp(2.55rem, 4vw, 4rem);

  font-weight:
    600;

  line-height:
    1.08;
}

.practice-services-heading p {
  max-width: 640px;

  margin:
    21px auto 0;

  color:
    rgba(255, 255, 255, 0.66);

  font-size:
    0.88rem;

  line-height:
    1.8;
}


/* ==========================================================
   GRID SERVICIOS
   ========================================================== */

.services-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  border-top:
    1px solid rgba(255, 255, 255, 0.11);

  border-left:
    1px solid rgba(255, 255, 255, 0.11);
}


/* ==========================================================
   TARJETA SERVICIO
   ========================================================== */

.service-card {
  position: relative;

  display: flex;

  min-height: 390px;

  padding: 32px;

  flex-direction:
    column;

  border-right:
    1px solid rgba(255, 255, 255, 0.11);

  border-bottom:
    1px solid rgba(255, 255, 255, 0.11);

  overflow: hidden;

  transition:
    background 0.35s ease;
}

.service-card::before {
  content: "";

  position: absolute;

  top: -105px;
  right: -105px;

  width: 210px;
  height: 210px;

  border:
    1px solid rgba(216, 181, 107, 0.12);

  border-radius:
    50%;

  transition:
    transform 0.45s ease,
    border-color 0.45s ease;
}

.service-card:hover {
  background:
    rgba(255, 255, 255, 0.035);
}

.service-card:hover::before {
  transform:
    scale(1.12);

  border-color:
    rgba(216, 181, 107, 0.28);
}


/* ==========================================================
   CABECERA DE LA TARJETA
   ========================================================== */

.service-card-top {
  display: flex;

  align-items:
    center;

  justify-content:
    space-between;
}

.service-number {
  color:
    rgba(216, 181, 107, 0.72);

  font-size:
    0.6rem;

  font-weight:
    700;

  letter-spacing:
    0.18em;
}

.service-code {
  display: flex;

  width: 43px;
  height: 43px;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid rgba(216, 181, 107, 0.42);

  border-radius:
    50%;

  color:
    var(--gold-2);

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    0.58rem;

  font-weight:
    700;

  letter-spacing:
    0.06em;
}


/* ==========================================================
   CONTENIDO DE LA TARJETA
   ========================================================== */

.service-card-content {
  margin-top:
    auto;
}

.service-card h3 {
  max-width: 285px;

  margin: 0;

  color:
    #ffffff;

  font-family:
    "Playfair Display",
    serif;

  font-size:
    1.48rem;

  font-weight:
    600;

  line-height:
    1.23;
}

.service-line {
  width: 42px;
  height: 1px;

  margin:
    18px 0 17px;

  background:
    var(--gold);
}

.service-card p {
  max-width: 310px;

  color:
    rgba(255, 255, 255, 0.63);

  font-size:
    0.82rem;

  line-height:
    1.75;
}


/* ==========================================================
   LINK SERVICIO
   ========================================================== */

.service-link {
  display: inline-flex;

  width:
    fit-content;

  margin-top: 22px;

  align-items:
    center;

  gap: 8px;

  color:
    var(--gold-2);

  font-size:
    0.68rem;

  font-weight:
    700;

  letter-spacing:
    0.06em;

  text-transform:
    uppercase;
}

.service-link span {
  transition:
    transform 0.25s ease;
}

.service-link:hover span {
  transform:
    translateX(5px);
}


/* ==========================================================
   05. TRANSICIÓN AZUL / BLANCO
   ========================================================== */

.services-transition {
  position: relative;

  height: 70px;

  overflow: hidden;

  background:
    #ffffff;
}

.services-transition::before,
.services-transition::after {
  content: "";

  position: absolute;

  top: 0;

  width: 50%;
  height: 70px;

  background:
    var(--navy);
}

.services-transition::before {
  left: 0;

  clip-path:
    polygon(0 0,
      100% 0,
      100% 10%,
      0 100%);
}

.services-transition::after {
  right: 0;

  clip-path:
    polygon(0 0,
      100% 0,
      100% 100%,
      0 10%);
}

.services-transition-line {
  position: absolute;

  top: 18px;
  left: 50%;

  z-index: 3;

  width: 58px;
  height: 2px;

  background:
    var(--gold);

  transform:
    translateX(-50%);
}


/* ==========================================================
   06. PROCESO
   ========================================================== */

.services-process {
  padding:
    clamp(80px, 9vw, 125px) 0;

  background:
    #ffffff;
}

.services-process-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 0.88fr) minmax(0, 1.12fr);

  gap:
    clamp(65px, 9vw, 125px);

  align-items:
    start;
}


/* ==========================================================
   INTRO PROCESO
   ========================================================== */

.services-process-intro {
  max-width: 530px;
}

.services-process-intro h2 {
  margin: 0;

  color:
    var(--navy);

  font-family:
    "Playfair Display",
    serif;

  font-size:
    clamp(2.45rem, 3.7vw, 3.8rem);

  font-weight:
    600;

  line-height:
    1.07;

  letter-spacing:
    -0.03em;
}

.services-process-intro>p {
  margin-top: 24px;

  font-size:
    0.91rem;

  line-height:
    1.85;
}


/* ==========================================================
   LINK PROCESO
   ========================================================== */

.process-link {
  position: relative;

  display: inline-flex;

  margin-top: 29px;

  padding-bottom:
    7px;

  align-items:
    center;

  gap:
    10px;

  color:
    var(--navy);

  font-size:
    0.77rem;

  font-weight:
    700;
}

.process-link::after {
  content: "";

  position: absolute;

  right: 0;
  bottom: 0;
  left: 0;

  height: 1px;

  background:
    var(--gold);
}

.process-link span {
  transition:
    transform 0.25s ease;
}

.process-link:hover span {
  transform:
    translateX(5px);
}


/* ==========================================================
   LISTA PROCESO
   ========================================================== */

.process-list {
  border-top:
    1px solid var(--line);
}

.process-item {
  display: grid;

  grid-template-columns:
    66px minmax(0, 1fr);

  gap:
    24px;

  padding:
    29px 0;

  border-bottom:
    1px solid var(--line);
}

.process-number {
  display: flex;

  width: 45px;
  height: 45px;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid rgba(216, 181, 107, 0.55);

  border-radius:
    50%;

  color:
    var(--gold);

  font-family:
    "Playfair Display",
    serif;

  font-size:
    0.88rem;

  font-weight:
    600;
}

.process-small {
  display: block;

  margin-bottom: 5px;

  color:
    var(--gold);

  font-size:
    0.56rem;

  font-weight:
    700;

  letter-spacing:
    0.15em;

  text-transform:
    uppercase;
}

.process-content h3 {
  color:
    var(--navy);

  font-family:
    "Playfair Display",
    serif;

  font-size:
    1.26rem;

  font-weight:
    600;
}

.process-content p {
  max-width: 540px;

  margin-top: 8px;

  font-size:
    0.84rem;

  line-height:
    1.75;
}


/* ==========================================================
   07. RESPONSIVE - 1100PX
   ========================================================== */

@media (max-width: 1100px) {

  .services-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .service-card {
    min-height:
      360px;
  }

}


/* ==========================================================
   08. RESPONSIVE - TABLET
   ========================================================== */

@media (max-width: 920px) {

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

  .services-hero {
    min-height:
      400px;
  }

  .services-hero-media img {
    object-position:
      61% center;
  }

  .services-hero-overlay {
    background:
      linear-gradient(90deg,
        rgba(5, 20, 36, 0.96) 0%,
        rgba(5, 20, 36, 0.87) 52%,
        rgba(5, 20, 36, 0.48) 100%);
  }

  .services-hero-content {
    max-width:
      570px;

    margin-left:
      clamp(15px, 3vw, 35px);

    padding:
      52px 0;
  }

  .services-hero h1 {
    font-size:
      clamp(2.5rem, 6vw, 3.65rem);
  }

  .services-hero-decoration {
    right:
      -185px;

    width:
      310px;

    height:
      310px;
  }


  /* -------------------------
     Introducción
     ------------------------- */

  .services-intro-grid {
    grid-template-columns:
      1fr;

    gap:
      42px;
  }

  .services-intro-copy {
    max-width:
      680px;
  }


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

  .services-process-grid {
    grid-template-columns:
      1fr;

    gap:
      50px;
  }

  .services-process-intro {
    max-width:
      650px;
  }

}


/* ==========================================================
   09. RESPONSIVE - MOBILE
   ========================================================== */

@media (max-width: 720px) {

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

  .services-hero {
    min-height:
      390px;
  }

  .services-hero-media img {
    object-position:
      64% center;
  }

  .services-hero-overlay {
    background:
      linear-gradient(180deg,
        rgba(5, 20, 36, 0.46) 0%,
        rgba(5, 20, 36, 0.68) 42%,
        rgba(5, 20, 36, 0.94) 100%);
  }

  .services-hero-content {
    max-width:
      540px;

    margin-left:
      0;

    padding:
      58px 0 52px;
  }

  .services-label {
    margin-bottom:
      12px;
  }

  .services-hero h1 {
    max-width:
      500px;

    font-size:
      clamp(2.3rem, 8.5vw, 3.1rem);
  }

  .services-hero-rule {
    margin:
      17px 0 15px;
  }

  .services-hero-content p {
    max-width:
      440px;

    font-size:
      0.82rem;
  }

  .services-hero-content .btn {
    margin-top:
      19px;
  }

  .services-hero-decoration {
    right:
      -230px;

    opacity:
      0.45;
  }


  /* -------------------------
     Introducción
     ------------------------- */

  .services-intro {
    padding:
      75px 0 110px;
  }

  .services-intro-title h2 {
    font-size:
      clamp(2.25rem, 8vw, 3rem);
  }


  /* -------------------------
     Principios
     ------------------------- */

  .services-principles {
    grid-template-columns:
      repeat(3, 1fr);
  }


  /* -------------------------
     Separador
     ------------------------- */

  .services-divider {
    height:
      54px;

    grid-template-columns:
      1fr 70px 1fr;
  }

  .services-divider-left,
  .services-divider-right,
  .services-divider-center,
  .services-divider-center::before,
  .services-divider-center::after {
    height:
      54px;
  }


  /* -------------------------
     Servicios
     ------------------------- */

  .practice-services {
    padding:
      75px 0 85px;
  }

  .practice-services-heading {
    margin-bottom:
      42px;
  }

  .practice-services-heading h2 {
    font-size:
      clamp(2.3rem, 8vw, 3.1rem);
  }

  .services-grid {
    grid-template-columns:
      1fr;
  }

  .service-card {
    min-height:
      325px;

    padding:
      30px;
  }


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

  .services-process {
    padding:
      75px 0;
  }

  .services-process-intro h2 {
    font-size:
      clamp(2.25rem, 8vw, 3rem);
  }

}


/* ==========================================================
   10. RESPONSIVE - MOBILE PEQUEÑO
   ========================================================== */

@media (max-width: 520px) {

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

  .services-hero {
    min-height:
      385px;
  }

  .services-hero-content {
    padding:
      50px 0 46px;
  }

  .services-hero h1 {
    font-size:
      clamp(2.15rem, 10vw, 2.7rem);
  }

  .services-hero-content p {
    max-width:
      94%;

    font-size:
      0.8rem;
  }


  /* -------------------------
     Principios
     ------------------------- */

  .services-principles {
    grid-template-columns:
      1fr;
  }

  .services-principles>div {
    display: flex;

    padding:
      12px 0;

    align-items:
      center;

    justify-content:
      flex-start;

    gap:
      14px;

    border-right:
      0;

    border-bottom:
      1px solid var(--line);

    text-align:
      left;
  }

  .services-principles>div:last-child {
    border-bottom:
      0;
  }

  .services-principles span {
    width:
      28px;

    margin:
      0;
  }


  /* -------------------------
     Servicios
     ------------------------- */

  .service-card {
    min-height:
      300px;

    padding:
      26px 22px;
  }

  .service-card h3 {
    font-size:
      1.35rem;
  }


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

  .process-item {
    grid-template-columns:
      52px minmax(0, 1fr);

    gap:
      14px;
  }

  .process-number {
    width:
      39px;

    height:
      39px;

    font-size:
      0.8rem;
  }

}


/* ==========================================================
   11. RESPONSIVE - 380PX
   ========================================================== */

@media (max-width: 380px) {

  .services-hero {
    min-height:
      370px;
  }

  .services-hero h1 {
    font-size:
      2.05rem;
  }

  .services-intro-title h2,
  .practice-services-heading h2,
  .services-process-intro h2 {
    font-size:
      2.05rem;
  }

}