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


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

.team-hero {
  position: relative;

  display: flex;

  /*
    ALTURA NORMAL:
    Esta medida se mantiene para laptop y escritorio normal.
  */
  min-height: 420px;

  overflow: hidden;

  align-items: center;

  background:
    var(--navy-2);
}


.team-hero-media,
.team-hero-overlay {
  position: absolute;

  inset: 0;
}


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


.team-hero-media img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position:
    center 38%;

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


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

  background:
    linear-gradient(
      90deg,
      rgba(5, 20, 36, 0.96) 0%,
      rgba(5, 20, 36, 0.88) 34%,
      rgba(5, 20, 36, 0.64) 61%,
      rgba(5, 20, 36, 0.28) 100%
    );
}


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

.team-hero-decoration {
  position: absolute;

  top: 50%;
  right: -100px;

  z-index: 2;

  width: 300px;
  height: 300px;

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

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

  pointer-events: none;
}


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

  position: absolute;

  inset: 36px;

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


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

  position: absolute;

  inset: 72px;

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


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

.team-hero-container {
  position: relative;

  z-index: 3;

  width: 100%;
}


.team-hero-content {
  max-width: 580px;

  margin-left:
    clamp(30px, 4vw, 70px);

  padding:
    45px 0;
}


.team-label {
  display: block;

  margin-bottom: 11px;

  color:
    var(--gold);

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

  font-size: 0.59rem;

  font-weight: 700;

  letter-spacing:
    0.18em;

  text-transform:
    uppercase;
}


.team-hero h1 {
  max-width: 580px;

  margin: 0;

  color:
    #ffffff;

  font-family:
    "Playfair Display",
    serif;

  font-size:
    clamp(2.25rem, 3.4vw, 3.45rem);

  font-weight: 600;

  line-height: 1.05;

  letter-spacing:
    -0.025em;
}


.team-hero h1 span {
  display: block;

  font-weight: 600;
}


.team-hero-rule {
  width: 52px;
  height: 2px;

  margin:
    17px 0 14px;

  background:
    var(--gold);
}


.team-hero-content p {
  max-width: 450px;

  margin: 0;

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

  font-size: 0.81rem;

  line-height:
    1.65;
}


/* ==========================================================
   02. ETIQUETAS GENERALES
   ========================================================== */

.section-label {
  display: block;

  margin-bottom: 11px;

  color:
    var(--gold);

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

  font-size:
    0.6rem;

  font-weight:
    700;

  letter-spacing:
    0.18em;

  text-transform:
    uppercase;
}


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


/* ==========================================================
   03. PRESENTACIÓN
   ========================================================== */

.team-introduction {
  position: relative;

  padding:
    62px 0 48px;

  overflow: hidden;

  background:
    #ffffff;
}


.team-introduction::after {
  content: "";

  position: absolute;

  top: -190px;
  right: -200px;

  width: 420px;
  height: 420px;

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

  transform:
    rotate(45deg);

  pointer-events:
    none;
}


.team-statement {
  position: relative;

  z-index: 2;

  max-width: 830px;

  margin-inline: auto;

  text-align:
    center;
}


.team-statement h2 {
  max-width: 830px;

  margin:
    0 auto;

  color:
    var(--navy);

  font-family:
    "Playfair Display",
    serif;

  font-size:
    clamp(2rem, 3vw, 2.85rem);

  font-weight: 600;

  line-height:
    1.12;

  letter-spacing:
    -0.025em;
}


.statement-line {
  width: 50px;
  height: 2px;

  margin:
    20px auto 17px;

  background:
    var(--gold);
}


.team-statement p {
  max-width: 600px;

  margin:
    0 auto;

  color:
    var(--muted);

  font-size: 0.84rem;

  line-height:
    1.75;
}


/* ==========================================================
   04. DIRECTORIO
   ========================================================== */

.team-directory {
  padding:
    20px 0 90px;

  background:
    #ffffff;
}


/* ==========================================================
   ENCABEZADO DEL DIRECTORIO
   ========================================================== */

.directory-heading {
  display: grid;

  max-width: 980px;

  margin:
    0 auto 35px;

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

  gap: 55px;

  align-items: end;
}


.directory-heading h2 {
  margin: 0;

  color:
    var(--navy);

  font-family:
    "Playfair Display",
    serif;

  font-size:
    clamp(1.9rem, 2.7vw, 2.65rem);

  font-weight: 600;

  line-height:
    1.1;

  letter-spacing:
    -0.02em;
}


.directory-heading > p {
  max-width: 440px;

  padding-bottom: 2px;

  font-size: 0.8rem;

  line-height:
    1.7;
}


/* ==========================================================
   05. GRID DEL EQUIPO
   ========================================================== */

.team-grid {
  display: grid;

  max-width: 980px;

  margin-inline: auto;

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

  gap:
    clamp(25px, 3vw, 38px);
}


/* ==========================================================
   06. MIEMBRO
   ========================================================== */

.team-member {
  position: relative;

  width: 100%;

  min-width: 0;
}


/* ==========================================================
   FOTO
   ========================================================== */

.member-image {
  position: relative;

  width: 100%;

  aspect-ratio:
    0.79 / 1;

  overflow: hidden;

  background:
    #e9e8e4;
}


.member-image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position:
    center top;

  filter:
    saturate(0.86)
    contrast(1.01);

  transform:
    scale(1.001);

  transition:
    transform 0.5s ease,
    filter 0.4s ease;
}


.member-image-overlay {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      180deg,
      transparent 65%,
      rgba(5, 20, 36, 0.11) 100%
    );

  pointer-events: none;

  transition:
    background 0.4s ease;
}


.team-member:hover .member-image img {
  transform:
    scale(1.03);

  filter:
    saturate(1)
    contrast(1.02);
}


.team-member:hover .member-image-overlay {
  background:
    linear-gradient(
      180deg,
      transparent 55%,
      rgba(5, 20, 36, 0.2) 100%
    );
}


/* ==========================================================
   ESQUINA DECORATIVA FOTO
   ========================================================== */

.member-corner {
  position: absolute;

  right: 0;
  bottom: 0;

  width: 44px;
  height: 44px;

  border-top:
    1px solid
    rgba(216, 181, 107, 0.72);

  border-left:
    1px solid
    rgba(216, 181, 107, 0.72);

  background:
    rgba(5, 20, 36, 0.86);

  transform:
    translate(14px, 14px)
    rotate(45deg);

  transition:
    transform 0.35s ease;
}


.team-member:hover .member-corner {
  transform:
    translate(7px, 7px)
    rotate(45deg);
}


/* ==========================================================
   INFORMACIÓN DEL ABOGADO
   ========================================================== */

.member-information {
  display: grid;

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

  gap: 11px;

  padding:
    16px 0 2px;

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


.member-number {
  padding-top: 4px;

  color:
    var(--gold);

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

  font-size:
    0.51rem;

  font-weight:
    700;

  letter-spacing:
    0.14em;
}


.member-text h3 {
  margin: 0;

  color:
    var(--navy);

  font-family:
    "Playfair Display",
    serif;

  font-size:
    clamp(1.15rem, 1.4vw, 1.4rem);

  font-weight:
    600;

  line-height:
    1.2;
}


.member-text p {
  margin-top: 4px;

  padding-bottom: 14px;

  color:
    var(--gold);

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

  font-size:
    0.59rem;

  font-weight:
    600;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


/* ==========================================================
   07. SEPARADOR
   ========================================================== */

.team-separator {
  display: grid;

  height: 58px;

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

  align-items: end;

  background:
    #ffffff;

  pointer-events: none;
}


.separator-left,
.separator-right {
  height: 58px;

  background:
    var(--navy);
}


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


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


.separator-center {
  position: relative;

  height: 58px;
}


.separator-center::before,
.separator-center::after {
  content: "";

  position: absolute;

  bottom: 0;

  width: 55%;
  height: 58px;

  background:
    var(--navy);
}


.separator-center::before {
  left: 0;

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


.separator-center::after {
  right: 0;

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


.separator-center span {
  position: absolute;

  bottom: 13px;
  left: 50%;

  z-index: 2;

  width: 6px;
  height: 6px;

  border-radius:
    50%;

  background:
    var(--gold);

  transform:
    translateX(-50%);
}


/* ==========================================================
   08. CULTURA PROFESIONAL
   ========================================================== */

.team-philosophy {
  position: relative;

  padding:
    80px 0;

  overflow: hidden;

  background:
    var(--navy);
}


.team-philosophy::before {
  content: "";

  position: absolute;

  top: -200px;
  right: -170px;

  width: 470px;
  height: 470px;

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

  transform:
    rotate(45deg);

  pointer-events:
    none;
}


.team-philosophy-grid {
  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 0.9fr)
    minmax(0, 1.1fr);

  gap:
    clamp(50px, 7vw, 90px);

  align-items: center;
}


/* ==========================================================
   FOTO CULTURA
   ========================================================== */

.philosophy-image {
  position: relative;

  max-width: 500px;

  overflow: hidden;

  background:
    rgba(255, 255, 255, 0.05);
}


.philosophy-image::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      180deg,
      transparent 65%,
      rgba(5, 20, 36, 0.3)
    );

  pointer-events:
    none;
}


.philosophy-image img {
  display: block;

  width: 100%;

  aspect-ratio:
    1.2 / 1;

  object-fit: cover;
}


/* ==========================================================
   CONTENIDO CULTURA
   ========================================================== */

.philosophy-content {
  max-width: 560px;
}


.philosophy-content h2 {
  margin: 0;

  color: #ffffff;

  font-family:
    "Playfair Display",
    serif;

  font-size:
    clamp(2rem, 3vw, 2.85rem);

  font-weight: 600;

  line-height: 1.08;

  letter-spacing:
    -0.025em;
}


.philosophy-rule {
  width: 52px;
  height: 2px;

  margin:
    20px 0 18px;

  background:
    var(--gold);
}


.philosophy-content > p {
  max-width: 500px;

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

  font-size: 0.84rem;

  line-height:
    1.75;
}


/* ==========================================================
   LISTA CULTURA
   ========================================================== */

.philosophy-list {
  margin-top: 25px;

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


.philosophy-item {
  display: grid;

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

  gap: 15px;

  padding:
    17px 0;

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


.philosophy-item > span {
  padding-top: 3px;

  color:
    var(--gold);

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

  font-size: 0.53rem;

  font-weight: 700;

  letter-spacing:
    0.14em;
}


.philosophy-item h3 {
  color: #ffffff;

  font-family:
    "Playfair Display",
    serif;

  font-size: 1.04rem;

  font-weight: 600;
}


.philosophy-item p {
  margin-top: 4px;

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

  font-size: 0.77rem;

  line-height:
    1.65;
}


/* ==========================================================
   09. CONTACTO FINAL
   ========================================================== */

.team-contact {
  padding:
    62px 0;

  background:
    #ffffff;
}


.team-contact-content {
  max-width: 680px;

  margin-inline:
    auto;

  text-align:
    center;
}


.team-contact-content h2 {
  margin: 0;

  color:
    var(--navy);

  font-family:
    "Playfair Display",
    serif;

  font-size:
    clamp(2rem, 3vw, 2.85rem);

  font-weight: 600;

  line-height: 1.08;
}


.team-contact-content > p {
  max-width: 500px;

  margin:
    15px auto 0;

  font-size: 0.84rem;

  line-height: 1.75;
}


.team-contact-actions {
  display: flex;

  margin-top: 22px;

  align-items: center;

  justify-content: center;

  flex-wrap: wrap;

  gap: 10px;
}


/* ==========================================================
   10. PANTALLAS GRANDES
   ========================================================== */

/*
   ESTE ES EL AJUSTE NUEVO.

   Solo se activa cuando la pantalla tiene 1500px
   o más de ancho.

   Laptop / tablet / móvil NO cambian.
*/

@media (min-width: 1500px) {

  .team-hero {
    /*
      1500px aprox. -> 480px
      1920px aprox. -> 557px
      Máximo -> 560px
    */
    min-height:
      clamp(480px, 29vw, 512px);
  }

}


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

@media (max-width: 1100px) {

  .team-grid {
    max-width: 900px;

    gap:
      28px;
  }


  .directory-heading {
    max-width: 900px;
  }


  .team-philosophy-grid {
    gap: 50px;
  }

}


/* ==========================================================
   12. RESPONSIVE - 920PX
   ========================================================== */

@media (max-width: 920px) {

  /* HERO */

  .team-hero {
    min-height:
      340px;
  }


  .team-hero-media img {
    object-position:
      58% center;
  }


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

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

    padding:
      44px 0;
  }


  .team-hero h1 {
    font-size:
      clamp(2.2rem, 5vw, 3rem);
  }


  /* PRESENTACIÓN */

  .team-introduction {
    padding:
      55px 0 42px;
  }


  /* ENCABEZADO EQUIPO */

  .directory-heading {
    max-width:
      760px;

    grid-template-columns:
      1fr;

    gap: 12px;

    margin-bottom:
      30px;
  }


  .directory-heading > p {
    max-width:
      550px;
  }


  /* EQUIPO */

  .team-grid {
    max-width:
      720px;

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

    gap:
      38px 28px;
  }


  /* CULTURA */

  .team-philosophy {
    padding:
      70px 0;
  }


  .team-philosophy-grid {
    grid-template-columns:
      1fr;

    gap:
      42px;
  }


  .philosophy-image {
    width:
      min(100%, 600px);

    max-width:
      600px;

    margin-inline:
      auto;
  }


  .philosophy-content {
    max-width:
      650px;

    margin-inline:
      auto;
  }

}


/* ==========================================================
   13. RESPONSIVE - 650PX
   ========================================================== */

@media (max-width: 650px) {

  /* HERO */

  .team-hero {
    min-height:
      330px;
  }


  .team-hero-media img {
    object-position:
      60% center;
  }


  .team-hero-overlay {
    background:
      linear-gradient(
        180deg,
        rgba(5, 20, 36, 0.45) 0%,
        rgba(5, 20, 36, 0.7) 40%,
        rgba(5, 20, 36, 0.95) 100%
      );
  }


  .team-hero-content {
    margin-left: 0;

    padding:
      48px 0 42px;
  }


  .team-hero h1 {
    max-width:
      470px;

    font-size:
      clamp(2.05rem, 8vw, 2.65rem);
  }


  .team-hero-decoration {
    right:
      -210px;

    opacity:
      0.5;
  }


  /* PRESENTACIÓN */

  .team-statement {
    max-width:
      570px;
  }


  .team-statement h2 {
    font-size:
      clamp(1.9rem, 7vw, 2.5rem);
  }


  /* DIRECTORIO */

  .team-directory {
    padding:
      15px 0 75px;
  }


  .directory-heading h2 {
    font-size:
      2rem;
  }


  /* EQUIPO */

  .team-grid {
    max-width:
      390px;

    grid-template-columns:
      1fr;

    gap:
      40px;
  }


  .member-image {
    aspect-ratio:
      0.82 / 1;
  }


  /* SEPARADOR */

  .team-separator {
    height:
      50px;

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


  .separator-left,
  .separator-right,
  .separator-center,
  .separator-center::before,
  .separator-center::after {
    height:
      50px;
  }


  /* CULTURA */

  .team-philosophy {
    padding:
      62px 0;
  }


  .philosophy-content h2 {
    font-size:
      clamp(2rem, 8vw, 2.6rem);
  }


  /* CONTACTO */

  .team-contact {
    padding:
      55px 0;
  }

}


/* ==========================================================
   14. RESPONSIVE - 520PX
   ========================================================== */

@media (max-width: 520px) {

  .team-hero {
    min-height:
      320px;
  }


  .team-hero-content {
    padding:
      45px 0 40px;
  }


  .team-hero h1 {
    font-size:
      clamp(2rem, 9vw, 2.5rem);
  }


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

    font-size:
      0.78rem;
  }


  .team-introduction {
    padding:
      48px 0 36px;
  }


  .team-statement h2 {
    font-size:
      1.9rem;
  }


  .team-statement p {
    font-size:
      0.8rem;
  }


  .directory-heading {
    margin-bottom:
      25px;
  }


  .directory-heading h2 {
    font-size:
      1.85rem;
  }


  .team-grid {
    max-width:
      340px;
  }


  .member-information {
    grid-template-columns:
      28px
      minmax(0, 1fr);

    gap:
      10px;

    padding-top:
      14px;
  }


  .member-text h3 {
    font-size:
      1.25rem;
  }


  .member-text p {
    font-size:
      0.56rem;
  }


  .philosophy-image img {
    aspect-ratio:
      1 / 0.82;
  }


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

    gap:
      11px;
  }


  .team-contact-content h2 {
    font-size:
      2rem;
  }


  .team-contact-actions {
    flex-direction:
      column;
  }


  .team-contact-actions .btn {
    width:
      min(100%, 300px);

    justify-content:
      center;
  }

}


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

@media (max-width: 380px) {

  .team-hero {
    min-height:
      310px;
  }


  .team-hero h1 {
    font-size:
      1.9rem;
  }


  .team-grid {
    max-width:
      310px;
  }


  .team-statement h2,
  .directory-heading h2,
  .philosophy-content h2,
  .team-contact-content h2 {
    font-size:
      1.85rem;
  }

}