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


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

.about-hero {
  position: relative;

  display: flex;

  min-height: 420px;

  overflow: hidden;

  align-items: center;

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


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

  inset: 0;
}


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


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

  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position:
    center 42%;

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


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

  background:
    linear-gradient(90deg,
      rgba(5, 20, 36, 0.96) 0%,
      rgba(5, 20, 36, 0.89) 34%,
      rgba(5, 20, 36, 0.65) 61%,
      rgba(5, 20, 36, 0.27) 100%);
}


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

.about-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;
}


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

  position: absolute;

  inset: 36px;

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


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

  position: absolute;

  inset: 72px;

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


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

.about-hero-container {
  position: relative;

  z-index: 3;

  width: 100%;
}


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

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

  padding:
    50px 0;
}


.about-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;
}


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

  margin: 0;

  color:
    #ffffff;

  font-family:
    "Playfair Display",
    serif;

  font-size:
    clamp(2.35rem, 3.5vw, 3.55rem);

  font-weight: 600;

  line-height: 1.05;

  letter-spacing:
    -0.025em;
}


.about-hero h1 span {
  display: block;

  font-weight: 600;
}


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

  margin:
    18px 0 15px;

  background:
    var(--gold);
}


.about-hero-content p {
  max-width: 460px;

  margin: 0;

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

  font-size:
    0.82rem;

  line-height:
    1.7;
}


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

.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. LA FIRMA
   ========================================================== */

.about-firm {
  position: relative;

  padding:
    82px 0 115px;

  overflow: hidden;

  background:
    #ffffff;
}


.about-firm::before {
  content: "";

  position: absolute;

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

  width: 430px;
  height: 430px;

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

  transform:
    rotate(45deg);

  pointer-events:
    none;
}


.about-firm-grid {
  position: relative;

  z-index: 2;

  display: grid;

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

  gap:
    clamp(55px, 7vw, 95px);

  align-items:
    center;
}


/* ==========================================================
   IMAGEN LA FIRMA
   ========================================================== */

.about-firm-image {
  position: relative;

  width: 100%;

  max-width: 490px;
}


.about-firm-image::before {
  content: "";

  position: absolute;

  top: -13px;
  left: -13px;

  z-index: -1;

  width: 76px;
  height: 76px;

  border-top:
    2px solid var(--gold);

  border-left:
    2px solid var(--gold);
}


.about-firm-image img {
  display: block;

  width: 100%;

  aspect-ratio:
    0.88 / 1;

  object-fit: cover;

  background:
    #e9e7e1;
}


.about-image-detail {
  position: absolute;

  right: -17px;
  bottom: -17px;

  width: 65px;
  height: 65px;

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

  background:
    var(--navy);

  transform:
    rotate(45deg);
}


/* ==========================================================
   CONTENIDO FIRMA
   ========================================================== */

.about-firm-content {
  max-width:
    590px;
}


.about-firm-content h2 {
  max-width:
    590px;

  margin: 0;

  color:
    var(--navy);

  font-family:
    "Playfair Display",
    serif;

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

  font-weight:
    600;

  line-height:
    1.1;

  letter-spacing:
    -0.025em;
}


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

  margin:
    21px 0 20px;

  background:
    var(--gold);
}


.about-firm-content p {
  max-width:
    555px;

  margin-top:
    15px;

  font-size:
    0.84rem;

  line-height:
    1.8;
}


.about-firm-content .about-lead {
  margin-top: 0;

  color:
    var(--navy);

  font-size:
    0.92rem;

  font-weight:
    500;
}


/* ==========================================================
   LINK FIRMA
   ========================================================== */

.about-link {
  position: relative;

  display:
    inline-flex;

  margin-top:
    25px;

  padding-bottom:
    6px;

  align-items:
    center;

  gap:
    10px;

  color:
    var(--navy);

  font-size:
    0.75rem;

  font-weight:
    700;
}


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

  position: absolute;

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

  height:
    1px;

  background:
    var(--gold);
}


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


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


/* ==========================================================
   04. SEPARADOR
   ========================================================== */

.about-separator {
  position: absolute;

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

  z-index: 4;

  display: grid;

  height: 58px;

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

  align-items:
    end;

  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: 3;

  width: 6px;
  height: 6px;

  border-radius:
    50%;

  background:
    var(--gold);

  transform:
    translateX(-50%);
}


/* ==========================================================
   05. PRINCIPIOS
   ========================================================== */

.about-principles {
  position: relative;

  padding:
    76px 0 88px;

  overflow: hidden;

  background:
    var(--navy);
}


.about-principles::after {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 1;

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

  pointer-events:
    none;
}


.principles-pattern {
  position: absolute;

  inset: 0;

  z-index: 0;

  opacity:
    0.28;

  background:
    linear-gradient(125deg,
      transparent 0 33%,
      rgba(255, 255, 255, 0.025) 33% 34%,
      transparent 34% 51%,
      rgba(255, 255, 255, 0.018) 51% 52%,
      transparent 52%);

  pointer-events:
    none;
}


.about-principles .container {
  position: relative;

  z-index: 2;
}


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

.principles-heading {
  max-width: 690px;

  margin:
    0 auto 42px;

  text-align:
    center;
}


.principles-heading h2 {
  margin: 0;

  color:
    #ffffff;

  font-family:
    "Playfair Display",
    serif;

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

  font-weight:
    600;

  line-height:
    1.1;
}


.principles-heading p {
  max-width:
    580px;

  margin:
    16px auto 0;

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

  font-size:
    0.82rem;

  line-height:
    1.75;
}


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

.principles-grid {
  display: grid;

  max-width:
    1000px;

  margin-inline:
    auto;

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

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

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


.principle-card {
  min-height:
    255px;

  padding:
    30px;

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

  transition:
    background 0.3s ease;
}


.principle-card:last-child {
  border-right:
    0;
}


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


.principle-number {
  color:
    var(--gold);

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

  font-size:
    0.54rem;

  font-weight:
    700;

  letter-spacing:
    0.17em;
}


.principle-line {
  width:
    40px;

  height:
    1px;

  margin:
    24px 0 22px;

  background:
    rgba(216, 181, 107, 0.75);
}


.principle-card h3 {
  color:
    #ffffff;

  font-family:
    "Playfair Display",
    serif;

  font-size:
    1.35rem;

  font-weight:
    600;
}


.principle-card p {
  max-width:
    270px;

  margin-top:
    10px;

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

  font-size:
    0.79rem;

  line-height:
    1.7;
}


/* ==========================================================
   06. TRANSICIÓN
   ========================================================== */

.about-transition {
  position: relative;

  height: 60px;

  overflow: hidden;

  background:
    #ffffff;
}


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

  position: absolute;

  top: 0;

  width:
    50%;

  height:
    60px;

  background:
    var(--navy);
}


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

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


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

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


.about-transition-line {
  position: absolute;

  top: 15px;
  left: 50%;

  z-index: 3;

  width:
    52px;

  height:
    2px;

  background:
    var(--gold);

  transform:
    translateX(-50%);
}


/* ==========================================================
   07. VISIÓN
   ========================================================== */

.about-vision {
  padding:
    70px 0 85px;

  background:
    #ffffff;
}


.about-vision-grid {
  display: grid;

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

  gap:
    clamp(55px, 8vw, 105px);

  align-items:
    start;
}


/* ==========================================================
   VISIÓN IZQUIERDA
   ========================================================== */

.vision-heading {
  max-width:
    510px;
}


.vision-heading h2 {
  margin: 0;

  color:
    var(--navy);

  font-family:
    "Playfair Display",
    serif;

  font-size:
    clamp(2.05rem, 3vw, 2.95rem);

  font-weight:
    600;

  line-height:
    1.1;

  letter-spacing:
    -0.025em;
}


.vision-heading>p {
  max-width:
    455px;

  margin-top:
    0;

  font-size:
    0.84rem;

  line-height:
    1.75;
}


/* ==========================================================
   VISIÓN DERECHA
   ========================================================== */

.vision-content {
  border-top:
    1px solid var(--line);
}


.vision-item {
  display: grid;

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

  gap:
    18px;

  padding:
    21px 0;

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


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

  color:
    var(--gold);

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

  font-size:
    0.54rem;

  font-weight:
    700;

  letter-spacing:
    0.15em;
}


.vision-item h3 {
  color:
    var(--navy);

  font-family:
    "Playfair Display",
    serif;

  font-size:
    1.12rem;

  font-weight:
    600;
}


.vision-item p {
  max-width:
    510px;

  margin-top:
    5px;

  font-size:
    0.8rem;

  line-height:
    1.7;
}


/* ==========================================================
   08. FRASE INSTITUCIONAL
   ========================================================== */

.about-quote {
  position: relative;

  padding:
    72px 0;

  overflow: hidden;

  background:
    var(--cream);
}


.about-quote::before {
  content: "“";

  position: absolute;

  top: -70px;
  left: 4%;

  color:
    rgba(216, 181, 107, 0.12);

  font-family:
    "Playfair Display",
    serif;

  font-size:
    19rem;

  line-height:
    1;

  pointer-events:
    none;
}


.quote-content {
  position: relative;

  z-index: 2;

  max-width:
    930px;

  margin-inline:
    auto;

  text-align:
    center;
}


.quote-content blockquote {
  max-width:
    900px;

  margin:
    0 auto;

  color:
    var(--navy);

  font-family:
    "Playfair Display",
    serif;

  font-size:
    clamp(2rem, 3.1vw, 3.15rem);

  font-weight:
    500;

  line-height:
    1.18;

  letter-spacing:
    -0.02em;
}


.quote-content blockquote em {
  display:
    inline;

  color:
    var(--gold);

  font-style:
    italic;

  font-weight:
    500;
}


.quote-detail {
  display: flex;

  margin-top:
    27px;

  align-items:
    center;

  justify-content:
    center;

  gap:
    15px;
}


.quote-detail span {
  width:
    42px;

  height:
    1px;

  background:
    rgba(216, 181, 107, 0.7);
}


.quote-detail p {
  margin: 0;

  color:
    var(--navy);

  font-size:
    0.58rem;

  font-weight:
    700;

  letter-spacing:
    0.14em;

  text-transform:
    uppercase;
}


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

.about-contact {
  padding:
    48px 0;

  background:
    var(--navy);
}


.about-contact-content {
  display: flex;

  max-width:
    980px;

  margin-inline:
    auto;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    50px;
}


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

  color:
    #ffffff;

  font-family:
    "Playfair Display",
    serif;

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

  font-weight:
    600;

  line-height:
    1.1;
}


.about-contact-actions {
  display: flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    10px;
}


.about-contact-actions .btn {
  min-width:
    170px;

  justify-content:
    center;
}


.about-contact-secondary {
  border:
    1px solid rgba(255, 255, 255, 0.48);

  background:
    transparent;

  color:
    #ffffff;
}


.about-contact-secondary:hover {
  border-color:
    var(--gold);

  background:
    rgba(216, 181, 107, 0.1);

  color:
    #ffffff;
}


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

/*
   Igual que hicimos en EQUIPO:
   aumenta la portada únicamente en pantallas grandes.

   Laptop conserva los 420px normales.
*/

@media (min-width: 1500px) {

  .about-hero {
    min-height:
      clamp(480px, 29vw, 560px);
  }

}


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

@media (max-width: 1100px) {

  .about-firm-grid {
    gap:
      55px;
  }


  .about-firm-image {
    max-width:
      450px;
  }


  .principles-grid {
    max-width:
      920px;
  }


  .about-vision-grid {
    gap:
      60px;
  }

}


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

@media (max-width: 920px) {

  /* HERO */

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


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


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

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

    padding:
      44px 0;
  }


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


  /* FIRMA */

  .about-firm {
    padding:
      70px 0 105px;
  }


  .about-firm-grid {
    grid-template-columns:
      minmax(0, 0.9fr) minmax(0, 1.1fr);

    gap:
      42px;
  }


  .about-firm-content h2 {
    font-size:
      clamp(2rem, 4.2vw, 2.6rem);
  }


  /* VISIÓN */

  .about-vision-grid {
    grid-template-columns:
      1fr;

    gap:
      42px;
  }


  .vision-heading {
    max-width:
      620px;
  }


  /* CONTACTO */

  .about-contact-content {
    max-width:
      760px;
  }

}


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

@media (max-width: 720px) {

  /* HERO */

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


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


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


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

    padding:
      48px 0 42px;
  }


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

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


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

    opacity:
      0.5;
  }


  /* FIRMA */

  .about-firm {
    padding:
      62px 0 100px;
  }


  .about-firm-grid {
    grid-template-columns:
      1fr;

    gap:
      40px;
  }


  .about-firm-image {
    width:
      min(100%, 470px);

    margin-inline:
      auto;
  }


  .about-firm-content {
    max-width:
      610px;
  }


  /* SEPARADOR */

  .about-separator {
    height:
      50px;

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


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


  /* PRINCIPIOS */

  .about-principles {
    padding:
      66px 0 72px;
  }


  .principles-heading h2 {
    font-size:
      clamp(2rem, 8vw, 2.7rem);
  }


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


  .principle-card {
    min-height:
      auto;

    padding:
      27px 24px;

    border-right:
      0;

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


  .principle-card:last-child {
    border-bottom:
      0;
  }


  .principle-line {
    margin:
      17px 0 16px;
  }


  /* VISIÓN */

  .about-vision {
    padding:
      62px 0 72px;
  }


  .vision-heading h2 {
    font-size:
      clamp(2rem, 8vw, 2.65rem);
  }


  /* FRASE */

  .about-quote {
    padding:
      60px 0;
  }


  .quote-content blockquote {
    font-size:
      clamp(1.85rem, 7vw, 2.55rem);
  }


  /* CONTACTO */

  .about-contact-content {
    flex-direction:
      column;

    align-items:
      flex-start;

    gap:
      25px;
  }

}


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

@media (max-width: 520px) {

  /* HERO */

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


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


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


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

    font-size:
      0.78rem;
  }


  /* FIRMA */

  .about-firm {
    padding:
      52px 0 90px;
  }


  .about-firm-image {
    width:
      min(100%, 360px);
  }


  .about-firm-content h2 {
    font-size:
      2rem;
  }


  .about-firm-content p {
    font-size:
      0.8rem;
  }


  /* PRINCIPIOS */

  .about-principles {
    padding:
      58px 0 65px;
  }


  .principles-heading {
    margin-bottom:
      32px;
  }


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


  /* VISIÓN */

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


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

    gap:
      11px;
  }


  /* FRASE */

  .about-quote {
    padding:
      52px 0;
  }


  .quote-content blockquote {
    font-size:
      1.9rem;
  }


  .quote-detail p {
    font-size:
      0.52rem;

    letter-spacing:
      0.1em;
  }


  .quote-detail span {
    width:
      25px;
  }


  /* CONTACTO */

  .about-contact {
    padding:
      42px 0;
  }


  .about-contact-content h2 {
    font-size:
      1.9rem;
  }


  .about-contact-actions {
    width:
      100%;

    flex-direction:
      column;
  }


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

}


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

@media (max-width: 380px) {

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


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


  .about-firm-content h2,
  .principles-heading h2,
  .vision-heading h2,
  .about-contact-content h2 {
    font-size:
      1.85rem;
  }


  .quote-content blockquote {
    font-size:
      1.75rem;
  }

}