/* ========================================
   TRATAMIENTO DE DATOS
   PUERTA DE ALCALÁ
======================================== */

:root {
  --verde-oscuro: #162D24;
  --verde-claro: #3DAA35;
  --beige: #F2E6D6;
  --beige-claro: #F5E8D1;
}


/* ========================================
   BASE
======================================== */

html {
  scroll-behavior: smooth;
}


body {
  margin: 0;

  background:
    var(--verde-oscuro);

  color:
    var(--beige-claro);

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


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

.legal-hero {
  min-height:
    clamp(420px, 32vh, 700px);

  box-sizing:
    border-box;

  display:
    flex;

  align-items:
    flex-end;

  padding:
    clamp(130px, 11vw, 190px)
    clamp(25px, 6vw, 110px)
    clamp(60px, 7vw, 120px);

  background:
    radial-gradient(
      ellipse at 15% 120%,
      rgba(61, 170, 53, 0.45) 0%,
      rgba(61, 170, 53, 0.14) 35%,
      rgba(61, 170, 53, 0) 65%
    ),
    #162D24;
}


.legal-hero-inner {
  width:
    100%;

  max-width:
    1450px;

  margin:
    0 auto;
}


.legal-eyebrow {
  display:
    block;

  margin-bottom:
    18px;

  color:
    rgba(245, 232, 209, 0.6);

  font-size:
    clamp(10px, 0.7vw, 13px);

  font-weight:
    500;

  letter-spacing:
    0.15em;
}


.legal-hero h1 {
  max-width:
    950px;

  margin:
    0;

  color:
    var(--beige-claro);

  font-size:
    clamp(42px, 3vw, 105px);

  font-weight:
    500;

  line-height:
    0.94;

  letter-spacing:
    -0.045em;
}


.legal-hero p {
  margin:
    clamp(25px, 3vw, 45px)
    0 0;

  color:
    rgba(245, 232, 209, 0.65);

  font-size:
    clamp(10px, 0.75vw, 14px);

  font-weight:
    300;
}


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

.legal-content {
  width:
    100%;

  max-width:
    1450px;

  margin:
    0 auto;

  box-sizing:
    border-box;

  padding:
    clamp(65px, 7vw, 125px)
    clamp(25px, 6vw, 90px)
    clamp(90px, 9vw, 160px);

  display:
    grid;

  grid-template-columns:
    minmax(190px, 0.75fr)
    minmax(0, 2.5fr);

  gap:
    clamp(50px, 7vw, 120px);
}


/* ========================================
   ÍNDICE
======================================== */

.legal-index {
  position:
    sticky;

  top:
    130px;

  align-self:
    start;
}


.legal-index-title {
  display:
    block;

  margin-bottom:
    22px;

  color:
    rgba(245, 232, 209, 0.45);

  font-size:
    9px;

  font-weight:
    600;

  letter-spacing:
    0.15em;
}


.legal-index nav {
  display:
    flex;

  flex-direction:
    column;

  gap:
    10px;
}


.legal-index a {
  color:
    rgba(245, 232, 209, 0.62);

  font-size:
    clamp(10px, 0.75vw, 13px);

  font-weight:
    300;

  line-height:
    1.35;

  transition:
    color 0.25s ease,
    transform 0.25s ease;
}


.legal-index a:hover {
  color:
    var(--beige);

  transform:
    translateX(4px);
}


/* ========================================
   DOCUMENTO
======================================== */

.legal-document {
  min-width:
    0;
}


.legal-intro {
  margin-bottom:
    clamp(55px, 5vw, 90px);

  padding-bottom:
    clamp(40px, 4vw, 65px);

  border-bottom:
    1px solid
    rgba(242, 230, 214, 0.22);
}


.legal-document p,
.legal-document li {
  color:
    rgba(245, 232, 209, 0.78);

  font-size:
    clamp(12px, 0.86vw, 15px);

  font-weight:
    300;

  line-height:
    1.75;
}


.legal-document p {
  margin:
    0 0 18px;
}


.legal-document strong {
  color:
    var(--beige-claro);

  font-weight:
    600;
}


/* ========================================
   SECCIONES
======================================== */

.legal-section {
  scroll-margin-top:
    130px;

  margin-bottom:
    clamp(65px, 6vw, 105px);
}


.legal-section h2 {
  max-width:
    850px;

  margin:
    0 0
    clamp(28px, 3vw, 45px);

  color:
    var(--beige);

  font-size:
    clamp(20px, 1.8vw, 31px);

  font-weight:
    500;

  line-height:
    1.2;

  letter-spacing:
    -0.025em;
}


/* ========================================
   LISTAS
======================================== */

.legal-alpha {
  margin:
    25px 0;

  padding-left:
    25px;

  list-style-type:
    lower-alpha;
}


.legal-alpha li {
  margin-bottom:
    16px;

  padding-left:
    7px;
}


/* ========================================
   CONTACTO
======================================== */

.legal-contact {
  margin-top:
    35px;

  padding:
    clamp(25px, 3vw, 40px);

  display:
    grid;

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

  gap:
    30px;

  border:
    1px solid
    rgba(242, 230, 214, 0.28);
}


.legal-contact > div {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  gap:
    8px;
}


.legal-contact span {
  color:
    rgba(245, 232, 209, 0.48);

  font-size:
    9px;

  font-weight:
    600;

  letter-spacing:
    0.12em;
}


.legal-contact a,
.legal-contact p {
  margin:
    0;

  color:
    var(--beige);

  font-size:
    clamp(10px, 0.75vw, 13px);

  line-height:
    1.5;
}


/* ========================================
   VIGENCIA
======================================== */

.legal-vigencia {
  margin-top:
    35px;

  padding:
    25px 30px;

  border-left:
    2px solid
    var(--verde-claro);

  background:
    rgba(61, 170, 53, 0.08);

  color:
    rgba(245, 232, 209, 0.8);

  font-size:
    clamp(11px, 0.82vw, 14px);

  font-weight:
    300;

  line-height:
    1.7;
}


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

.legal-signature {
  margin-top:
    clamp(75px, 8vw, 130px);

  padding-top:
    35px;

  border-top:
    1px solid
    rgba(242, 230, 214, 0.22);

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  gap:
    5px;
}


.legal-signature strong {
  font-size:
    13px;
}


.legal-signature span {
  color:
    rgba(245, 232, 209, 0.62);

  font-size:
    11px;
}


/* ========================================
   TABLET
======================================== */

@media (max-width: 1000px) {

  .legal-content {
    grid-template-columns:
      180px 1fr;

    gap:
      45px;
  }


  .legal-contact {
    grid-template-columns:
      1fr;
  }

}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 768px) {

  .legal-hero {
    min-height:
      500px;

    padding:
      120px
      20px
      55px;
  }


  .legal-hero h1 {
    font-size:
      clamp(40px, 12vw, 62px);
  }


  .legal-content {
    display:
      block;

    padding:
      55px
      20px
      90px;
  }


  .legal-index {
    position:
      static;

    margin-bottom:
      60px;

    padding-bottom:
      35px;

    border-bottom:
      1px solid
      rgba(242, 230, 214, 0.2);
  }


  .legal-index nav {
    display:
      grid;

    grid-template-columns:
      1fr 1fr;

    gap:
      12px 20px;
  }


  .legal-index a {
    font-size:
      10px;
  }


  .legal-document p,
  .legal-document li {
    font-size:
      12px;

    line-height:
      1.7;
  }


  .legal-section h2 {
    font-size:
      21px;
  }


  .legal-alpha {
    padding-left:
      22px;
  }


  .legal-contact {
    padding:
      25px 20px;
  }

}