/* =========================================================
   DESDE-FUERA — LANDING PAGE CSS (FULL FILE)
   - Desktop: original layout (2 columns: title left / "presencia..." right)
   - Tablet: collapses to 1 column (your existing behaviour)
   - Mobile portrait: OVERRIDE to keep 2 columns so "presencia..." stays RIGHT
   - Mobile: font sizes scaled down (works online, not file://)
   ========================================================= */
/*font-family: "source-han-sans-sc-variable", sans-serif;
font-variation-settings: "wght" 250;*/




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

/* LANDING BASE */
body.landing{
  background: #fff;
  color: #303030;
  min-height: 100vh;
  font-family: "source-sans-3", sans-serif;
}

/* GRID */
.landing-grid{
  width: min(1400px, calc(100% - 80px));
  margin: 0 auto;
  min-height: 100vh;

  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: stretch;
}

/* LEFT COLUMN */
.landing-left{
  display: grid;
  grid-template-rows: auto 1fr auto;
}

/* TOP */
.landing-top{
  padding-top: 40px;
}

.landing-url{
  font-size: 16px;
}

/* TITLE AREA */
.landing-title{
  display: grid;
  align-content: center;
  gap: 12px;
}

/* MAIN TITLE */
body.landing h1{
  font-family: "urbana", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 96px;
  color: #494949 !important;
  margin: 0;
}

/* DIVIDER (you hide it later; leaving here in case you re-enable) */
.divider{
  width: 140px;
  height: 1px;
  background: #b0b0b0;
}

/* SUBTITLE */
.landing-subtitle{
  font-family: "source-sans-3", sans-serif;
  font-weight: 300;
  font-style: italic;
  font-size: 14px;
  margin: 0;
}

/* LANG ACTIONS (desktop) */
.lang-actions{
  margin-top: -70px;
  display: flex;
  gap: 24px;
  justify-content: flex-end;
}

.lang-actions a{
  font-family: "source-sans-3", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 18px;

  color: #494949;
  text-decoration: none;

  transition: color .2s ease, opacity .2s ease;
}

.lang-actions a:hover{
  color: #21BCFF;
  opacity: 1;
}

/* BOTTOM */
.landing-bottom{
  padding-bottom: 40px;
  font-size: 16px;
  line-height: 1.4;
}

/* RIGHT COLUMN */
.landing-right{
  padding: 40px 0;
  display: flex;
  align-items: center;     /* vertical centering */
  justify-content: flex-end;
}

/* RIGHT TEXT (presencia sin acceso) */
.landing-right-text{
  font-family: "urbana", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 96px;
  color: #494949 !important;   /* FIXED (was invalid in your file) */
  text-align: center;
  line-height: 1.0;
  margin: 0;
}

/* OPTIONAL: shrink-wrap title block so languages align to its right edge */
body.landing .landing-title{
  width: fit-content;
}

/* DIVIDER OFF (as you had) */
body.landing .divider{
  display: none;
}

/* SOCIAL (you currently hide them on landing) */
.social-links{
  position: fixed;
  left: calc((100vw - min(1400px, calc(100vw - 80px))) / 2);
  bottom: 44px;

  display: grid;
  gap: 6px;
  text-align: left;
}

.social-links a{
  font-size: 18px;
  text-decoration: none;
  color: #303030;
  transition: color .25s ease;
}

.social-links a:hover{
  color: #21BCFF;
}

/* TEMP — hide social links on landing (as in your current setup) */
body.landing .social-links{
  display: none;
}

/* =========================================================
   TABLET / SMALL DESKTOP (your previous behaviour)
   - Collapses to one column at <= 900px
   ========================================================= */
@media (max-width: 900px){
  .landing-grid{
    grid-template-columns: 1fr;
  }

  .landing-right-text{
    font-size: 56px;
    text-align: left;
  }
}

/* MOBILE PORTRAIT — Align text block and move it closer to the left */
@media (max-width: 480px) and (orientation: portrait){

  /* Important: Grid adjustments for better mobile layout */
  .landing-grid{
    grid-template-columns: 1fr auto !important;   /* Keep right column */
    align-items: center !important;
    width: calc(100% - 16px) !important;  /* Tighter sides to bring the block closer */
    gap: 20px !important;
  }

  /* Left column: Align to top and push it left */
  body.landing .landing-left {
    justify-content: flex-start !important; /* Align to left */
    align-items: flex-start !important;     /* Align to top */
    padding-left: 16px !important;          /* Push it to the left */
  }

  /* Title area: Align text block to the left */
  .landing-title {
    align-items: flex-start !important;
    text-align: left !important;   /* Align text to the left */
    padding-right: 16px;           /* Adjust right padding if necessary */
    margin-left: 0 !important;     /* Push it closer to the left */
  }

  body.landing h1 {
    font-size: 36px !important;     /* Adjust font size for mobile */
    line-height: 1.05 !important;   /* Adjust line height */
  }

  body.landing .landing-right-text {
    font-size: 36px !important;     /* Adjust font size */
    line-height: 1.05 !important;   /* Adjust line height */
  }

  /* Adjust language menu if needed */
  body.landing .lang-actions{
    justify-content: flex-end !important;
  }

  body.landing .lang-actions a {
    font-size: 14px !important;     /* Adjust font size for language menu */
  }

  body.landing .landing-url,
  body.landing .landing-bottom {
    font-size: 14px !important;     /* Adjust font size for other elements */
  }
}