/*
   CSS Sueño UC
   Nombre del archivo   :      style.css
   Descripción          :      CSS para lading de Sueño  UC
   Autor(a)             :      Visibilidad Digital.
   Versión              :      1.0.0
   Fecha de creación    :      25/09/2025
   Última actualización :      25/09/2025
   Dependencias         :      https://kit-digital-uc-prod.s3.amazonaws.com/uc-kitdigital/css/uc-kitdigital.css
   Notas                : 
 */

:root {
    --color-1: #fffae8;
    --color-2: #c7d9ec;
    --color-3: #F4EDD2;
}

body {
    background-color: var(--color-1);
}
.btn-scroll-up {
  position: fixed;
  bottom: 0;
  right:16px;  
  z-index: 100;
}
#section1 {
  position: relative;
  z-index: 101;
  background-color: var(--color-1);
}

.btn-scroll-up .uc-icon.icon-shape--rounded, 
.btn-scroll-up .uc-svg-icon.icon-shape--rounded { 
  color: #000;
  background-color: var(--color-2);
}

.container-img--mobile {
  height: 170px;
  overflow: hidden;
  position: relative;
  
}

.container-img--mobile img {
  position: absolute;
  top: -160px;
  
}

.container-img {
    width: 100%;
    overflow: hidden;
}

.container-img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* recorta para llenar el contenedor */
  }

.uc-hero {
  width: 100%;
  overflow: hidden;
}

#section1 .uc-hero {
  height: 640px;
}
#section1 .uc-hero  .icon-shape--rounded {
  background-color: var(--color-3);
  color: #000;
}

@media screen and (max-width:1200px) {
  #section1 .uc-hero {
    height: 460px;
  }
  #section1 .uc-hero .h1 {
    font-size: 1.5em;
  }
}


.uc-background-video {
  display: block;
  width: 100%;
  /*height: auto;*/
  max-width: 100%; /* evita que se desborde */
}

.compact {
  margin: 0;          /* quita margenes */
  line-height: 1.5;   /* opcional: ajusta altura de línea */
}

.section--cta {
    background-color: #ffffff;
    border-top: 1px solid var(--color-3);
    z-index: 10;
    position: relative;
}
.section--cta .col-cta::before {
    content:    "";
    position: absolute;
    display:    inline-block;
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    width: 310px;
    height: 100px;
    top: -20px;
    left: 10px;
}
.section--cta .col-cta h2::before {
  content:    "";
  position: absolute;
  display:    inline-block;
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
  width: 310px;
  height: 100px;
  bottom: -24px;
  right: 10px;
}

video {
  display: block; /* elimina el espacio por defecto en línea */
  max-width: 100%;
  height: 500px; 
  background-color: #000;
}

/* Línea divisora negra de 1px */
.divider-black {
  border-bottom: 1px solid #000;
  position: relative;
  padding-bottom: 1px;
}

.divider-black::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background-color: #000;
}

.divider-blue {
  border-top: 10px solid #CAD9EA;
  position: relative;
  padding-top: 8px;
  
}

.divider-blue::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 100%;
  background-color: #CAD9EA;
}

.p-display {
    font-size: 2.5em;
    line-height: 1.3em;
    position: relative;
}

.p-display-quote::before {
    content:    "";
    display:    inline-block;
    background: url("../img/quote-open.svg") no-repeat center / contain;
    width:      100px;
    height:     100px;
    position:   absolute;
    top:        -60px;
    left:       -60px;
    color:      var(--color-2);
    z-index:    -10;
}

.p-display-quote_section2::before {
  content:    "";
  display:    inline-block;
  background: url("../img/quote-open.svg") no-repeat center / contain;
  width:      100px;
  height:     100px;
  position:   absolute;
  top:        -10px;
  left:       -124px;
  color:      var(--color-2);
  z-index:    -10;
}

.p-display span {
    position: relative;
}

.p-display span::before {
    /*font-family: "Material Symbols Outlined";
    content: "format_quote";
    font-size: 4em;
    vertical-align: middle;*/
    content:    "";
    display:    inline-block;
    background: url("../img/quote-end.svg") no-repeat center / contain;
    width:      100px;
    height:     100px;
    position:   absolute;
    bottom:     -60px;
    right:      -60px;
    color:      var(--color-2);
    z-index:    -10;
}

.uc-icon.icon-shape--rounded, .uc-svg-icon.icon-shape--rounded {
    background-color: #000;
}

.uc-btn.btn-inline:hover .uc-icon.icon-shape--rounded, .uc-btn.btn-inline.hover .uc-icon.icon-shape--rounded {
    color: #000;
    background-color: var(--color-2);
}


.pb-xl {
  padding-bottom: 120px;
}


.block_border-left-bottom {
  border-left: 1px solid black;
  border-bottom: 1px solid black;
}

.block_bg__beige {
  background-color: var(--color-3);
}

.block_bg__light-blue {
  background-color: var(--color-2);
  text-align: center;
  padding: 24px;
}

.block_bg__float-light-blue {
  position: relative;
  height: 60px;
  text-align: right;
  margin: 24px;
}

.block_bg__float-light-blue::before {
  content:    "";
    display:    inline-block;
    background-color: var(--color-2);
    width:      100%;
    height:     100px;
    position:   absolute;
    bottom:     0px;
    left:       20%;
    z-index:    -10;
}

.uc-btn.btn-secondary, .uc-btn.uc-btn-secondary {
  background-color: #000;
}

.uc-hero__suena-a,
.uc-hero__suena-b {
  overflow: visible;
}

.uc-hero__suena-a,
.uc-hero__suena-b {
  height: 560px;
}

@media (min-width: 992px) {
  .uc-hero__suena-a  .uc-hero__card-container {
      margin-bottom: -2rem;
  }
  .uc-hero__suena-b  .uc-hero__card-container {
    margin-bottom: 4rem;
    
  }
  .uc-hero__suena-b  .uc-hero__bg-img {
    object-position: 40%;
  }
}

@media (min-width: 768px) {
  .uc-hero__suena-a {
      height: 640px;
  }
}
@media screen and (max-width: 991px) {
  .p-display {
      font-size: 1.6em; 
  }
  .p-display::before {
      width:  60px;
      height: 60px;
      top:    -40px;
      left:   -40px;
  }
  .p-display span::before {
      width:  60px;
      height: 60px;
      bottom: -40px;
      right:  -40px;
  }
  .block_bg__light-blue {
    text-align: left;
    padding: 0 24px 24px;
  }
  .uc-hero .p-size--lg {
    font-size: 1em;
  }
  .uc-hero {
    background-color: var(--color-2);
  }
  .uc-hero__bg-img {
    height: 200px;
  }
}

@media screen and (max-width: 991px) {
  .block_bg__float-light-blue {
    text-align: left;
    height: 24px;
    margin: 16px;
  }
  .block_bg__float-light-blue::before {
    display: none;
  } 
}

@media screen and (min-width: 1200px) {
  .pb-xl {
    padding-bottom: 260px;
  }
}