/* =========================================================
   BACALAREANDO — HOME SUBTLE V1

   PRINCIPIO:
   la fotografía vende;
   el copy solamente acompaña.
   ========================================================= */


/*
   HERO:
   buscamos únicamente el primer hero
   del Home. No toca otras páginas.
*/

body.page-home main > section:first-child,
body.page-home main > [class*="hero"]:first-child {
  position: relative;
}


/* ---------------------------------------------------------
   TITULAR
   --------------------------------------------------------- */

body.page-home main > section:first-child h1,
body.page-home main > [class*="hero"]:first-child h1 {

  width: min(620px, 92%) !important;
  max-width: 620px !important;

  margin-top: 18px !important;
  margin-bottom: 22px !important;

  font-size:
    clamp(
      3.25rem,
      6vw,
      5.7rem
    ) !important;

  line-height: .88 !important;

  letter-spacing: -.045em !important;

  text-wrap: balance;

  text-shadow:
    0 4px 22px
    rgba(0,0,0,.16) !important;
}


/*
   La parte en cursiva/turquesa
   deja de ocupar media pantalla.
*/

body.page-home main > section:first-child h1 em,
body.page-home main > section:first-child h1 i,
body.page-home main > section:first-child h1 span,
body.page-home main > [class*="hero"]:first-child h1 em,
body.page-home main > [class*="hero"]:first-child h1 i {

  font-size: .84em !important;
}


/* ---------------------------------------------------------
   EYEBROW
   --------------------------------------------------------- */

body.page-home main > section:first-child [class*="eyebrow"],
body.page-home main > section:first-child [class*="kicker"],
body.page-home main > section:first-child [class*="overline"],
body.page-home main > [class*="hero"]:first-child [class*="eyebrow"],
body.page-home main > [class*="hero"]:first-child [class*="kicker"] {

  font-size: .72rem !important;

  letter-spacing: .16em !important;

  opacity: .88 !important;

  margin-bottom: 12px !important;
}


/* ---------------------------------------------------------
   DESCRIPCIÓN
   --------------------------------------------------------- */

body.page-home main > section:first-child h1 ~ p,
body.page-home main > [class*="hero"]:first-child h1 ~ p {

  width: min(500px, 88%) !important;
  max-width: 500px !important;

  margin-top: 0 !important;
  margin-bottom: 26px !important;

  font-size:
    clamp(
      .94rem,
      1.25vw,
      1.08rem
    ) !important;

  line-height: 1.55 !important;

  font-weight: 400 !important;

  color:
    rgba(
      255,
      255,
      255,
      .90
    ) !important;

  text-shadow:
    0 2px 12px
    rgba(0,0,0,.18) !important;
}


/* ---------------------------------------------------------
   BOTONES MÁS DISCRETOS
   --------------------------------------------------------- */

body.page-home main > section:first-child a[class*="btn"],
body.page-home main > section:first-child a[class*="button"],
body.page-home main > [class*="hero"]:first-child a[class*="btn"],
body.page-home main > [class*="hero"]:first-child a[class*="button"] {

  min-height: 48px !important;

  padding:
    11px
    22px !important;

  font-size:
    .88rem !important;

  border-radius:
    999px !important;
}


/*
   El CTA secundario debe sentirse
   ligero sobre la fotografía.
*/

body.page-home main > section:first-child a[class*="secondary"],
body.page-home main > section:first-child a[class*="outline"],
body.page-home main > [class*="hero"]:first-child a[class*="secondary"],
body.page-home main > [class*="hero"]:first-child a[class*="outline"] {

  background:
    rgba(
      255,
      255,
      255,
      .07
    ) !important;

  border-color:
    rgba(
      255,
      255,
      255,
      .55
    ) !important;

  backdrop-filter:
    blur(5px);

  -webkit-backdrop-filter:
    blur(5px);
}


/* ---------------------------------------------------------
   FOTO

   Un poquito más de vida.
   No ponemos filtros dramáticos.
   --------------------------------------------------------- */

body.page-home main > section:first-child img,
body.page-home main > section:first-child video,
body.page-home main > [class*="hero"]:first-child > img,
body.page-home main > [class*="hero"]:first-child > video {

  filter:
    saturate(1.07)
    contrast(1.02) !important;
}


/* ---------------------------------------------------------
   DESKTOP GRANDE

   Copy ocupa menos espacio horizontal.
   --------------------------------------------------------- */

@media (min-width: 1200px) {

  body.page-home main > section:first-child
  [class*="content"],

  body.page-home main > section:first-child
  [class*="copy"],

  body.page-home main > [class*="hero"]:first-child
  [class*="content"],

  body.page-home main > [class*="hero"]:first-child
  [class*="copy"] {

    max-width:
      650px !important;
  }

}


/* ---------------------------------------------------------
   MÓVIL
   --------------------------------------------------------- */

@media (max-width: 720px) {

  body.page-home main > section:first-child h1,
  body.page-home main > [class*="hero"]:first-child h1 {

    width: 92% !important;

    font-size:
      clamp(
        2.8rem,
        15vw,
        4.25rem
      ) !important;

    line-height:
      .91 !important;

    margin-bottom:
      18px !important;
  }


  body.page-home main > section:first-child h1 ~ p,
  body.page-home main > [class*="hero"]:first-child h1 ~ p {

    width:
      92% !important;

    max-width:
      390px !important;

    font-size:
      .94rem !important;

    line-height:
      1.48 !important;
  }


  body.page-home main > section:first-child a[class*="btn"],
  body.page-home main > section:first-child a[class*="button"],
  body.page-home main > [class*="hero"]:first-child a[class*="btn"],
  body.page-home main > [class*="hero"]:first-child a[class*="button"] {

    min-height:
      44px !important;

    padding:
      10px
      18px !important;

    font-size:
      .82rem !important;
  }

}