:root {
  --forest: #10372e;
  --forest-deep: #082820;
  --forest-soft: #355c50;

  --green: #75954d;
  --green-bright: #70b642;
  --green-soft: #b8ca9b;

  --cream: #f4f1e8;
  --paper: #fbfaf7;

  --line: #ded8cc;

  --text: #202823;
  --muted: #6e7771;

  --white: #ffffff;
}



/* =========================
   GENERAL
========================= */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


html {
  scroll-behavior: smooth;
}


body {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Helvetica,
    Arial,
    sans-serif;

  background:
    var(--paper);

  color:
    var(--text);

  line-height: 1.6;
}


a {
  color: inherit;

  text-decoration: none;
}


img {
  display: block;

  max-width: 100%;
}


.shell {
  width:
    min(
      1180px,
      calc(100% - 48px)
    );

  margin-inline: auto;
}


h1,
h2,
h3 {
  text-wrap: balance;
}



/* =========================
   EYEBROW
========================= */

.eyebrow {
  display: block;

  margin-bottom: 18px;

  color:
    var(--forest-soft);

  font-size: 11px;

  font-weight: 700;

  letter-spacing:
    0.22em;

  text-transform:
    uppercase;
}


.eyebrow-light {
  color:
    rgba(
      255,
      255,
      255,
      0.72
    );
}



/* =========================
   HEADER
========================= */

.site-header {
  position: sticky;

  top: 0;

  z-index: 100;

  background:
    rgba(
      251,
      250,
      247,
      0.97
    );

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);

  border-bottom:
    1px
    solid
    rgba(
      16,
      55,
      46,
      0.08
    );
}


.nav-shell {
  width:
    min(
      1240px,
      calc(100% - 48px)
    );

  min-height:
    88px;

  margin-inline:
    auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    32px;
}


.brand img {
  width:
    220px;

  max-height:
    64px;

  object-fit:
    contain;
}


.main-nav {
  display:
    flex;

  align-items:
    center;

  gap:
    29px;

  color:
    #425047;

  font-size:
    13px;

  font-weight:
    600;
}


.main-nav a {
  transition:
    color
    0.2s
    ease;
}


.main-nav a:hover {
  color:
    var(--green);
}


.nav-cta {
  padding:
    10px
    18px;

  border:
    1px
    solid
    var(--forest);

  border-radius:
    999px;
}



/* =========================
   BOTONES
========================= */

.button {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    47px;

  padding:
    12px
    21px;

  border-radius:
    999px;

  font-size:
    13px;

  font-weight:
    700;

  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}


.button:hover {
  transform:
    translateY(-1px);
}


.button-dark {
  background:
    var(--forest);

  color:
    var(--white);
}


.button-dark:hover {
  background:
    var(--forest-soft);
}


.button-light {
  background:
    var(--white);

  color:
    var(--forest);
}


.button-light:hover {
  background:
    #eef2eb;
}


.button-outline-light {
  border:
    1px
    solid
    rgba(
      255,
      255,
      255,
      0.60
    );

  color:
    var(--white);
}


.button-outline-light:hover {
  background:
    rgba(
      255,
      255,
      255,
      0.08
    );
}


.full {
  width:
    100%;
}



/* =========================
   PORTADA
========================= */

.hero {
  position:
    relative;

  min-height:
    720px;

  overflow:
    hidden;

  color:
    var(--white);

  background-color:
    var(--forest-deep);

  background-image:
    url("/assets/portada-residencial.png");

  background-size:
    cover;

  background-position:
    center right;

  background-repeat:
    no-repeat;
}



/*
   La fotografía cubre toda la portada.

   Este degradado genera el efecto del arte:
   verde oscuro sólido a la izquierda y
   fotografía progresivamente visible a la derecha.
*/

.hero-shade {
  position:
    absolute;

  inset:
    0;

  z-index:
    1;

  background:
    linear-gradient(
      90deg,

      rgba(
        8,
        40,
        32,
        0.99
      )
      0%,

      rgba(
        8,
        40,
        32,
        0.98
      )
      24%,

      rgba(
        8,
        40,
        32,
        0.94
      )
      37%,

      rgba(
        8,
        40,
        32,
        0.80
      )
      50%,

      rgba(
        8,
        40,
        32,
        0.48
      )
      65%,

      rgba(
        8,
        40,
        32,
        0.18
      )
      82%,

      rgba(
        8,
        40,
        32,
        0.07
      )
      100%
    );
}


.hero-shell {
  position:
    relative;

  z-index:
    2;

  width:
    min(
      1240px,
      calc(100% - 48px)
    );

  min-height:
    720px;

  margin-inline:
    auto;

  padding:
    105px
    0
    70px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    flex-end;
}


.hero-copy {
  max-width:
    680px;
}


.hero h1 {
  max-width:
    680px;

  color:
    var(--white);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      72px,
      8vw,
      118px
    );

  font-weight:
    400;

  line-height:
    0.86;

  letter-spacing:
    -0.055em;
}


.hero-tagline {
  margin-top:
    37px;

  color:
    var(--white);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      30px,
      3.25vw,
      46px
    );

  line-height:
    1.08;
}


.hero-description {
  max-width:
    565px;

  margin-top:
    25px;

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

  font-size:
    16px;

  line-height:
    1.72;
}


.hero-actions {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    14px;

  margin-top:
    36px;
}


.hero-note {
  position:
    absolute;

  right:
    0;

  bottom:
    72px;

  width:
    310px;

  padding-left:
    25px;

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

  text-transform:
    uppercase;

  letter-spacing:
    0.18em;
}


.hero-note span,
.hero-note strong {
  display:
    block;
}


.hero-note span {
  color:
    rgba(
      255,
      255,
      255,
      0.67
    );

  font-size:
    10px;
}


.hero-note strong {
  margin-top:
    7px;

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

  font-size:
    12px;
}



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

.section {
  padding:
    112px
    0;
}


.section-intro {
  display:
    grid;

  grid-template-columns:
    1fr
    410px;

  align-items:
    end;

  gap:
    64px;
}


.section-intro h2,
.location h2 {
  color:
    var(--forest);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      42px,
      5vw,
      64px
    );

  font-weight:
    400;

  line-height:
    0.98;
}


.section-intro > p {
  color:
    var(--muted);

  font-size:
    16px;
}



/* =========================
   RECURSOS
========================= */

.resources {
  background:
    var(--paper);
}


.resource-grid {
  margin-top:
    62px;

  display:
    grid;

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

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


.resource-card {
  min-height:
    350px;

  padding:
    36px
    30px
    30px;

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

  display:
    flex;

  flex-direction:
    column;

  transition:
    background 0.2s ease,
    transform 0.2s ease;
}


.resource-card:last-child {
  border-right:
    none;
}


.resource-card:hover {
  background:
    var(--white);

  transform:
    translateY(-2px);
}


.resource-index {
  color:
    #a0a8a2;

  font-family:
    Georgia,
    serif;

  font-size:
    12px;
}


.resource-icon {
  width:
    44px;

  height:
    44px;

  margin:
    46px
    0
    26px;
}


.resource-icon svg {
  width:
    100%;

  height:
    100%;

  fill:
    none;

  stroke:
    var(--forest);

  stroke-width:
    1.4;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


.resource-card h3 {
  color:
    var(--forest);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    25px;

  font-weight:
    400;
}


.resource-card p {
  max-width:
    240px;

  margin-top:
    10px;

  color:
    var(--muted);

  font-size:
    14px;
}


.resource-link {
  margin-top:
    auto;

  padding-top:
    28px;

  color:
    var(--forest);

  font-size:
    12px;

  font-weight:
    700;
}



/* =========================
   NUESTRA COMUNIDAD
========================= */

.community {
  display:
    grid;

  grid-template-columns:
    1.08fr
    0.92fr;

  min-height:
    650px;

  background:
    var(--cream);
}


.community-visual {
  position:
    relative;

  min-height:
    650px;

  overflow:
    hidden;

  background:
    #cad7be;
}


.community-visual img {
  position:
    absolute;

  inset:
    0;

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  object-position:
    center;

  filter:
    saturate(0.90)
    contrast(0.98);
}


.community-visual::after {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  background:
    linear-gradient(
      90deg,

      rgba(
        16,
        55,
        46,
        0.02
      ),

      rgba(
        16,
        55,
        46,
        0.10
      )
    );

  pointer-events:
    none;
}


.community-copy {
  align-self:
    center;

  max-width:
    620px;

  padding:
    90px
    10vw
    90px
    76px;
}


.community-copy h2 {
  color:
    var(--forest);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      42px,
      5vw,
      64px
    );

  font-weight:
    400;

  line-height:
    1;
}


.community-copy p {
  margin-top:
    25px;

  color:
    var(--muted);

  font-size:
    16px;
}


.community-signature {
  margin-top:
    50px;

  padding-top:
    24px;

  border-top:
    1px
    solid
    #d2ccbe;

  color:
    var(--forest);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    19px;

  font-style:
    italic;
}



/* =========================
   SEGURIDAD
========================= */

.security {
  padding:
    104px
    0;

  background:
    var(--forest-deep);

  color:
    var(--white);
}


.security-grid {
  display:
    grid;

  grid-template-columns:
    1.15fr
    0.85fr;

  align-items:
    center;

  gap:
    90px;
}


.security-copy h2 {
  max-width:
    680px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      44px,
      5.4vw,
      70px
    );

  font-weight:
    400;

  line-height:
    0.98;
}


.security-copy p {
  max-width:
    610px;

  margin-top:
    25px;

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

  font-size:
    16px;
}


.security-card {
  padding:
    36px;

  border:
    1px
    solid
    rgba(
      255,
      255,
      255,
      0.15
    );

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


.security-label {
  color:
    rgba(
      255,
      255,
      255,
      0.58
    );

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    0.18em;

  text-transform:
    uppercase;
}


.security-phone {
  display:
    block;

  margin:
    10px
    0
    27px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      36px,
      4.5vw,
      52px
    );
}


.security-card small {
  display:
    block;

  margin-top:
    16px;

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

  font-size:
    11px;
}



/* =========================
   JUNTA DE VECINOS
========================= */

.board {
  background:
    var(--cream);
}


.board-grid {
  margin-top:
    62px;

  display:
    grid;

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

  border:
    1px
    solid
    #d7d0c3;
}


.board-person {
  min-height:
    190px;

  padding:
    38px
    30px;

  border-right:
    1px
    solid
    #d7d0c3;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    flex-start;
}


.board-person:last-child {
  border-right:
    none;
}


.board-person span {
  color:
    var(--forest-soft);

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    0.17em;

  text-transform:
    uppercase;
}


.board-person h3 {
  max-width:
    340px;

  margin-top:
    14px;

  color:
    var(--forest);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    26px;

  font-weight:
    400;

  line-height:
    1.15;
}



/* =========================
   UBICACIÓN
========================= */

.location {
  padding:
    112px
    0;

  background:
    var(--white);
}


.location-grid {
  display:
    grid;

  grid-template-columns:
    0.72fr
    1.28fr;

  align-items:
    center;

  gap:
    74px;
}


.location-copy p {
  margin-top:
    17px;

  color:
    var(--muted);
}


.location-detail {
  max-width:
    380px;

  margin-bottom:
    30px;

  font-size:
    14px;
}


.map-card {
  position:
    relative;

  overflow:
    hidden;

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

  border-radius:
    5px;

  background:
    #eef0ed;

  box-shadow:
    0
    26px
    70px
    rgba(
      31,
      45,
      38,
      0.08
    );
}


.map-card img {
  width:
    100%;

  min-height:
    430px;

  object-fit:
    cover;

  filter:
    saturate(0.74)
    contrast(0.96)
    brightness(1.03);
}


.map-card::after {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  border:
    12px
    solid
    rgba(
      255,
      255,
      255,
      0.38
    );

  pointer-events:
    none;
}


.map-pin {
  position:
    absolute;

  left:
    57%;

  top:
    52%;

  width:
    42px;

  height:
    42px;

  transform:
    translate(
      -50%,
      -50%
    )
    rotate(
      45deg
    );

  border:
    4px
    solid
    rgba(
      255,
      255,
      255,
      0.92
    );

  border-radius:
    50%
    50%
    50%
    0;

  background:
    var(--forest);

  box-shadow:
    0
    10px
    22px
    rgba(
      8,
      40,
      32,
      0.28
    );
}


.map-pin span {
  position:
    absolute;

  left:
    50%;

  top:
    50%;

  width:
    10px;

  height:
    10px;

  transform:
    translate(
      -50%,
      -50%
    );

  border-radius:
    50%;

  background:
    var(--green-soft);
}



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

.contact {
  padding:
    104px
    0;

  background:
    var(--forest);

  color:
    var(--white);
}


.contact-grid {
  display:
    grid;

  grid-template-columns:
    1fr
    1fr;

  align-items:
    end;

  gap:
    80px;
}


.contact h2 {
  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      50px,
      6vw,
      76px
    );

  font-weight:
    400;

  line-height:
    0.94;
}


.contact p {
  max-width:
    560px;

  margin-top:
    24px;

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


.contact-card {
  padding-top:
    25px;

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


.contact-card span {
  display:
    block;

  margin-bottom:
    8px;

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

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    0.17em;

  text-transform:
    uppercase;
}


.contact-card a {
  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      25px,
      3vw,
      36px
    );
}



/* =========================
   FOOTER
========================= */

.footer {
  padding:
    44px
    0;

  background:
    #071d17;

  color:
    var(--white);
}


.footer-grid {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    36px;
}


.footer img {
  width:
    190px;

  padding:
    10px
    12px;

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


.footer-copy {
  display:
    grid;

  gap:
    3px;

  text-align:
    right;

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

  font-size:
    11px;
}


.footer-copy strong {
  color:
    rgba(
      255,
      255,
      255,
      0.82
    );

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    15px;

  font-weight:
    400;
}



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

@media (max-width: 980px) {


  .main-nav a:not(.nav-cta) {
    display:
      none;
  }


  /* PORTADA */

  .hero {
    min-height:
      700px;

    background-position:
      62%
      center;
  }


  .hero-shade {
    background:
      linear-gradient(
        90deg,

        rgba(
          8,
          40,
          32,
          0.98
        )
        0%,

        rgba(
          8,
          40,
          32,
          0.94
        )
        42%,

        rgba(
          8,
          40,
          32,
          0.66
        )
        68%,

        rgba(
          8,
          40,
          32,
          0.32
        )
        100%
      );
  }


  .hero-shell {
    min-height:
      700px;

    padding:
      90px
      0
      62px;
  }


  .hero-note {
    position:
      static;

    width:
      auto;

    max-width:
      320px;

    margin-top:
      55px;
  }


  /* SECCIONES */

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

    gap:
      24px;
  }


  /* RECURSOS */

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


  .resource-card {
    border-bottom:
      1px
      solid
      var(--line);
  }


  .resource-card:nth-child(2) {
    border-right:
      none;
  }


  .resource-card:nth-child(3),
  .resource-card:nth-child(4) {
    border-bottom:
      none;
  }


  /* COMUNIDAD */

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


  .community-visual {
    min-height:
      470px;
  }


  .community-copy {
    max-width:
      none;

    padding:
      80px
      7vw;
  }


  /* SEGURIDAD */

  .security-grid {
    grid-template-columns:
      1fr;

    gap:
      50px;
  }


  /* JUNTA */

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


  .board-person {
    min-height:
      auto;

    border-right:
      none;

    border-bottom:
      1px
      solid
      #d7d0c3;
  }


  .board-person:last-child {
    border-bottom:
      none;
  }


  /* UBICACIÓN */

  .location-grid {
    grid-template-columns:
      1fr;

    gap:
      50px;
  }


  /* CONTACTO */

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

    gap:
      55px;
  }

}



/* =========================
   CELULAR
========================= */

@media (max-width: 620px) {


  .shell,
  .nav-shell,
  .hero-shell {
    width:
      calc(
        100% - 36px
      );
  }


  /* HEADER */

  .site-header {
    position:
      static;
  }


  .nav-shell {
    min-height:
      76px;
  }


  .brand img {
    width:
      165px;
  }


  .nav-cta {
    padding:
      8px
      13px;

    font-size:
      11px;
  }


  /* PORTADA */

  .hero {
    min-height:
      700px;

    background-position:
      61%
      center;
  }


  /*
     En móvil el degradado pasa a ser
     principalmente vertical para mantener
     legibilidad sobre la fotografía.
  */

  .hero-shade {
    background:
      linear-gradient(
        180deg,

        rgba(
          8,
          40,
          32,
          0.95
        )
        0%,

        rgba(
          8,
          40,
          32,
          0.90
        )
        45%,

        rgba(
          8,
          40,
          32,
          0.72
        )
        72%,

        rgba(
          8,
          40,
          32,
          0.54
        )
        100%
      );
  }


  .hero-shell {
    min-height:
      700px;

    padding:
      64px
      0
      48px;
  }


  .hero h1 {
    font-size:
      64px;

    letter-spacing:
      -0.045em;
  }


  .hero-tagline {
    margin-top:
      30px;

    font-size:
      31px;
  }


  .hero-description {
    font-size:
      15px;
  }


  .hero-actions {
    flex-direction:
      column;

    align-items:
      flex-start;
  }


  .hero-actions .button {
    width:
      100%;
  }


  .hero-note {
    margin-top:
      42px;
  }


  /* SECCIONES */

  .section,
  .location {
    padding:
      78px
      0;
  }


  .section-intro h2,
  .location h2 {
    font-size:
      44px;
  }


  /* RECURSOS */

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


  .resource-card {
    min-height:
      285px;

    border-right:
      none;

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


  .resource-card:nth-child(3) {
    border-bottom:
      1px
      solid
      var(--line);
  }


  .resource-card:last-child {
    border-bottom:
      none;
  }


  .resource-icon {
    margin-top:
      32px;
  }


  /* COMUNIDAD */

  .community-visual {
    min-height:
      350px;
  }


  .community-copy {
    padding:
      65px
      24px;
  }


  .community-copy h2 {
    font-size:
      43px;
  }


  /* SEGURIDAD */

  .security,
  .contact {
    padding:
      76px
      0;
  }


  .security-copy h2 {
    font-size:
      45px;
  }


  .security-phone {
    font-size:
      34px;
  }


  .security-card {
    padding:
      28px;
  }


  /* JUNTA */

  .board-grid {
    margin-top:
      42px;
  }


  .board-person {
    padding:
      30px
      24px;
  }


  .board-person h3 {
    font-size:
      24px;
  }


  /* MAPA */

  .map-card img {
    min-height:
      340px;
  }


  .map-pin {
    width:
      36px;

    height:
      36px;
  }


  /* CONTACTO */

  .contact h2 {
    font-size:
      48px;
  }


  .contact-card a {
    font-size:
      23px;

    word-break:
      break-word;
  }


  /* FOOTER */

  .footer-grid {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .footer-copy {
    text-align:
      left;
  }

}