@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200&display=swap');

body{
    font-family:  'Montserrat', Arial, Helvetica, sans-serif;
    background-image: beige;
    overflow-x: hidden;
}

html body { margin: 0; height: 100%; }
  
ul { margin: 0; padding: 0; }

@keyframes fadeIn {
    0% {
      opacity: 0;
      transform: translateY(-50px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
}

.paragraph{
    /*margin-left: 1em;
    margin-right: 1em;
    margin-top: 0;*/
    text-align: justify;
    font-size: 1em;
    line-height: 2em;
    transition:all 1s ease-in-out;
}

a {
    color: initial;
    text-decoration: none;
    margin: 0;
}

/* END RESET*/

/*img artist*/
.portrait img{
    margin-bottom: 1em;
    height: 20em;
    width: auto;
    aspect-ratio: 7 / 8; 
}
/* end img artist*/

.resize:hover{
    transform: scale(1.2);
    transition: transform ease-in-out 0.5s;
}

.navbar { min-height: 64px; }
.navbar .navbar-toggler { width: 55.6px; height: 44px; }

li { text-decoration: none; }
ul { list-style-type: none; }

/*ICONO firma*/
.icon {
    cursor: pointer;
    /*width: 3em;*/
    padding-right: 1.5em;
}

/*--FLECHA--*/
.scroll-to-top {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 24px;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
    z-index: 999;
    opacity: 0.7;
    transform: scale(0); /* Agregamos una escala inicial de 0 para que esté oculto */
    transition: transform 0.3s ease; /* Añadimos una transición para la animación */
}
i>img{
    width: 2em;
    height: 2em;
}
.scroll-to-top.show {
    display: block;
    transform: scale(1); /* Escala de 1 para mostrar el botón completo */
}
/*final*/

/*footer{
    font-size: 80%;
    bottom: 1em;
    color: black;
    padding-left: 2em;
    margin-bottom: 2em;
}*/

/*GALERIA*/
.apple-grid{
  display:grid;
  gap:15px;
  /* columnas fluidas */
  /*grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));*/
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  grid-auto-rows: 220px; /*100px*/
}

/* tarjeta */
.tile{
  position:relative;
  overflow:hidden;
  border-radius:10px;
}

/* imagen sin deformar */
.tile img{
  width:100%;
  height:100%;
  object-fit:cover;   /* llena la tarjeta, sin deformar (recorta si hace falta) */
  display:block;
  transition: transform 400ms ease-in-out;
}

.tile:hover img{
    transform: scale(1.10);
}

/* variantes de tamaño (como hace Apple) */
.span-col-2{ grid-column: span 2; }
.span-col-3{ grid-column: span 3; }
.span-row-2{ grid-row: span 2; }
.span-row-3{ grid-row: span 3; }
.span-2x2{ grid-column: span 2; grid-row: span 2; }
.span-2x3{ grid-column: span 2; grid-row: span 3; }

.row-3, .row-4, .position-1 {transition: all ease-in-out .5s;}

.row-3:hover {grid-row: span 3; grid-column: span 2;}
.row-4:hover {grid-row: span 4; grid-column: span 1;}
.position-1:hover {grid-row: 1/4; grid-column: span 3;}

/* En móvil, todo 1x1 */
@media (max-width: 576px){
    .apple-grid{  grid-template-columns: repeat(2, minmax(0,1fr)); grid-auto-rows: 350px; }
    .span-2x2, .tile {  grid-column: span 2; grid-row: span 1; }
    .span-row-2, .span-row-3, .span-2x3 {  grid-column: span 2; grid-row: span 2; }
    .span-col { grid-column:auto; grid-row:auto; }

    .tile:hover img{
    transform: scale(1);
}
}
/*FIN GALERIA*/

/*carousel*/
.carousel-h100 img{
    max-height: 100vh;
    object-fit: contain;
}

.btn-social {
  height: 2.5rem;
  width: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 100%;
}

.footer {
  text-align: center;
  font-size: 0.9rem;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/*MOBIL*/
@media (max-width:768px) {
    footer{
        font-size: 70%;
        padding-right: 1em;
    }
    p{
        font-size: 1em;
        line-height: 1.5em;
    }

    .mb-end { align-items: flex-end !important; }
    .mb-end p { text-align: end;} 
}

.contacto{
    background-image: url(../images/INICIO.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
    top: 0;
    left: 0;
    overflow: hidden;
    min-height: 100vh;
}

/*grid 2*/
.grid-2{
    display:grid;
    gap:40px;
    grid-template-columns: 1fr 1fr 1fr;
    
}

@media (max-width: 576px) {
    .grid-2{
    display:grid;
    gap:10px;
    grid-template-columns: 1fr;
    
}
}

.hero-parallax{
  position:relative;
  height:clamp(50vh, 70vh, 85vh);
  overflow:hidden;
  background:#000;
}
.hero-parallax picture, .hero-parallax img{
  width:100%;
  /* height:120%; */
  display:block;
  object-fit:cover;
}
.hero-copy{
  position:absolute; inset:auto 0 8%;
  display:flex; flex-direction:column; align-items:center;
  color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.35);
}

.call4action {
  background-image: url(../images/dunarII-call4action.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  top: 0;
  left: 0;
  overflow: hidden;
  color: white;
}

.restauracion {
  background-image: url(../images/volumen.jpg);
}