@font-face {
            font-family:'Golden-Moment';
            src: url('/static/fonts/Golden-Moment.otf')format('opentype');
            font-weight:normal;
            font-style: normal;
        }
         @font-face {
            font-family:'Gotham-Bold';
            src: url('/static/fonts/Gotham-Bold.otf')format('opentype');
            font-weight:normal;
            font-style: normal;
        }
        @font-face {
            font-family:'Gotham-Book';
            src: url('/static/fonts/Gotham-Book.otf')format('opentype');
            font-weight: normal;
            font-style: normal;
        }
        @font-face {
            font-family:'Gotham-Medium';
            src: url('/static/fonts/Gotham-Medium.otf')format('opentype');
            font-weight: normal;
            font-style: normal;
        }
        @font-face {
            font-family:'Gotham-Ultra';
            src: url('/static/fonts/Gotham-Ultra.otf')format('opentype');
            font-weight: normal;
            font-style: normal;
        }
        html, body {
            margin: 0;
            padding: 0;
            height: 100vh;
            width: 100vw;
            overflow: hidden;
            box-sizing: border-box;
            position: relative;
        }
        
        #hojas-container {
            position: fixed;  /* o absolute, para posicionarlo respecto a la ventana o al padre */
            top: 0;
            left: 0;
            width: 100%;    /* que ocupe toda la anchura de la ventana */
            height: 100vh;   /* que ocupe toda la altura de la ventana */
            pointer-events: none; /* para que no interfiera con clicks en otros elementos */
            overflow: hidden; /* para que las hojas no provoquen scroll */
            z-index: 10;   /* encima de otros elementos */
        }
        .leaf {
            position: absolute;
            width: 100px;        /* Cambia a lo que necesites */
            height: auto;        /* Mantiene la proporción */
            user-select: none;
            pointer-events: none;
        }
        .sun{
           width: 28px;
            opacity: 0.9; 
        }
        .flower{
            width: 22px;
        }
        .flake {
            position: absolute;
            width: 100px;        /* Cambia a lo que necesites */
            height: auto;        /* Mantiene la proporción */
            user-select: none;
            pointer-events: none;
        }
        .frase{
            font-family:'Golden-Moment';
            /* font-family:'Gotham-Book'; */
            font-size: 7vmin;
            font-weight: normal;
            color:rgb(168, 152, 113);
            padding-left: 50px;
            padding-right: 50px;
        
        }
        .banner{
            width: 100%;
            height: 16vh;
            min-height: 16vh; /* o más si hace falta */
            /* background: white; */
            background:transparent;
            margin-top:20px; 
            display: flex;
            align-items: center;
            justify-content: center; 
            /* border-bottom: 2px solid rgb(239, 118, 63); */
            position: relative; /* Necesario para que la imagen absoluta se ubique dentro */
        }

        .logo-banner {
            height: 100%;
            max-height: 100%;
            width: auto;
            object-fit: contain;
            display: block;
         }      

        .con-decoracion {
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }   
        .decoracion-banner {
            position: absolute;
            top: 0;
            left: 0;
            width: 150px;  /* ajustá según necesites */
            height: auto;
            z-index: 10;
            pointer-events: none; /* Para que no interfiera con clicks */
        }
        .Nbanner{
            padding-left: 50px;
            padding-right: 50px;
            font-family:'Golden-Moment';
            /* font-family:'Gotham-Book'; */
            font-size: clamp(5rem, 12vw, 14rem);
            font-weight: normal;
            color: rgb(168, 152, 113);
            
        }
        .container {
            width: 100%;
            height: 100%;
            margin: 0 auto;
            padding: 0px;
            overflow: hidden;
            
        }
        .image-container {
            flex: 1 1 40%;
            flex-shrink: 0;
	    max-width: 550px;
	    width: 100%;
            padding: 10px;
            box-sizing: border-box;
           
        }
        .image-container img {
            display: block;
            margin-left: auto;
            margin-right: auto;
            width: 70%;      /* o lo que necesites */
            border-radius: 10px;
            height: auto;
            object-fit: contain;
            max-height: 70vh;
        }
        .Ntime{
	    font-family:'Gotham-Book'; 
            font-size: 8vmin;
        }
        .weather-info {
            flex: 1 1 40%;
            text-align: center;
            padding: 10px;
            box-sizing: border-box;
            max-width: 600px;
            overflow-wrap: break-word;
        }
        .weather-info p {
            line-height: 1.1;  /* más compacto, valor entre 1.0 y 1.2 recomendado */
            margin: 4px 0;     /* opcional: reduce espacio vertical */
            color: rgb(168, 152, 113) !important;
        }
        .Ftime, .time, .Ntime, .temp, .dir {
            line-height: 1.1;
            margin: 2px 0;
        }
        .time {
            font-family:'Gotham-Bold';
            font-size: 13vmin;
        }
        .Ftime {
            font-family:'Gotham-Book'; 
            font-size: 5vmin;
        }

        .Ntime {
            font-size: 5vmin;
        }
        .Nbanner {
            font-size: 12vmin;
        }
        
        .temp {
            font-family:'Gotham-Bold';
            font-size: 13vmin;
        }
        .dir{
            font-family:'Gotham-Book';
            font-size: 5vmin;
            font-weight: normal;
        }
        .responsive-image {
            width: 100%;
            height: auto;
            border-radius: 10px;
        }
        /* Responsive por defecto: columnas */
        .content-row {
            display: flex;
            flex-direction: row-reverse;
            align-items: center;
            justify-content: center;
            gap: 40px;
            padding: 10px;
            box-sizing: border-box;
            height: calc(100vh - 16vh);
            overflow: hidden;
        }
        @media (max-width: 900px), (orientation: portrait) {
           .content-row {
              flex-direction: column;
              gap: 10px;
              padding: 10px 0;
              height: auto;
              overflow: hidden;
           }	

           .image-container,
           .weather-info {
              flex: 1 1 100%;
              max-width: 100%;
              text-align: center;
              margin: 0;
              padding: 10px;
           }

           .image-container img {
              max-width: 50%;
              height: auto;
              max-height: none;
              object-fit: contain;
           }

           .banner {
              flex-direction: column;
              height: auto;
              margin-top: 10px;
              text-align: center;
           }

           .frase {
              display: none;
           }

           .Nbanner {
              font-size: 8vmin;
           }

           .time {
              font-size: 14vmin;
           }

           .temp {
              font-size: 14vmin;
           }

           .Ftime,
           .Ntime {
              font-size: 6vmin;
           }

           .dir {
              font-size: 5vmin;
           }
        }

        @media (max-width: 768px), (orientation: portrait) {
           .content-row {
              flex-direction: column;
              align-items: center;
              justify-content: flex-start;
              text-align: center;
              gap: 15px;
              padding: 10px 0;
              height: auto;
           }
           .banner {
              flex-direction: column;
              align-items: center;
              justify-content: center;
              height: auto;
              padding: 5px 0;
              text-align: center;
              margin: 0;
           }

           .logo-banner {
              width: 100px;
              height: auto;
              
           } 

           .Nbanner {
              font-size: 10vmin;
              margin-bottom: 5px;
              line-height: 1.1;
           }

           .weather-info {
              order: 2;
              width: 100%;
              padding: 5px;
              margin: 0;
           }

           .image-container {
              order: 3;
              width: 100%;
              padding: 5px;	
           }
         
           .image-container img {
              max-width: 80%;
              height: auto;
              max-height: 40vh;
           }

           .banner img {
              max-width: 100%;
              height: auto; 
           }

           .texto-patrocinado {
              display: none;
           }
        }

/* --- Personalización específica para la vista de predicciones --- */

/* Contenedor principal: flex row, altura proporcional, padding y box-sizing */
.contenedor {
    display: flex;
    flex-direction: row;
    height: 75vh; /* Proporcional a la altura visible */
    padding: 2vh 2vw;
    box-sizing: border-box;
    color: rgb(168, 152, 113);
    overflow-x: hidden;
    overflow-y: hidden; /* Evita scroll horizontal */
}

/* Columna izquierda: ancho fijo máximo pero adaptable, margen a la izquierda */
.columna.izquierda {
    flex: 0 0 auto;
    max-width: 320px;
    width: 25vw; /* Usar ancho relativo */
    min-width: 280px; /* Mínimo para no achicar demasiado */
    margin-left: 4vw;
    display: flex;
    flex-direction: column;
    gap: 1.2vh;
    color: inherit;
    overflow-y: auto;
    max-height: 100%;
}
.columna.izquierda h2{
    text-align: center;
}
/* Cada item en columna izquierda */
.izquierda .item {
    background-color: rgba(255, 255, 255, 0.2);
    padding: 0.7em 1.2em;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    font-size: clamp(0.9rem, 1.5vw, 1.1rem);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    color: inherit;
}

/* Imagen pequeña en items columna izquierda */
.izquierda .item img {
    height: clamp(24px, 4vw, 36px);
    margin-left: 10px;
    flex-shrink: 0;
    object-fit: contain;
}

/* Columna derecha: ocupa todo el espacio restante */
.columna.hoy {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 6vw;
    color: inherit;
    min-width: 0; /* Para que el flex no desborde */
}

/* Items dentro de columna derecha */
.columna.hoy .item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4vw;
    padding: 1em 2em;
    width: 100%;
    box-sizing: border-box;
    height: 100%;
    color: inherit;
}

/* Texto en columna hoy: vertical, grande y alineado a la izquierda */
.columna.hoy .item .texto {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.3em;
    font-size: 13vmin; /* Escalable según viewport */
    line-height: 1.2;
    font-weight: 700;
    text-align: center;
}

/* Imagen grande columna derecha: escalable, sin cortar ni deformar */
.columna.hoy .item img {
    max-width: 32vw;
    max-height: 40vh;
    object-fit: contain;
    flex-shrink: 0;
}

.Nbanner1 {
    padding-left: 3vw;
    padding-right: 3vw;
    font-family: 'Golden-Moment';
    font-size: clamp(1.5rem, 5vw, 4rem); /* mínimo 1.5rem, ideal 5vw, máximo 4rem */
    font-weight: normal;
    color: rgb(168, 152, 113);
    text-align: center;
}

.frase1 {
    font-family: 'Golden-Moment';
    font-size: clamp(1.2rem, 4vw, 3rem); /* mínimo 1.2rem, ideal 4vw, máximo 3rem */
    font-weight: normal;
    color: rgb(168, 152, 113);
    padding-left: 3vw;
    padding-right: 3vw;
    text-align: center;
}

.banner1{
    margin-top: 20px;  
    width: 100%;
    height: 16vh;
    /* background: white; */
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center; 
    /* border-bottom: 2px solid rgb(239, 118, 63); */
    position: relative; /* Necesario para que la imagen absoluta se ubique dentro */
}

.logo1-banner1 {
    height: 100%;
    max-height: 100%;
    width: auto;
    object-fit: contain;
    display: block;
}      

@media screen and (min-width: 1400px) and (max-height: 750px) and (orientation: landscape){
    .columna.izquierda {
        max-width: 260px;
        width: 20vw;
        gap: 0.8vh;
    }

    .izquierda .item {
        font-size: clamp(0.9rem, 1.5vw, 1.2rem);
        padding: 0.6em 1em;
    }

    .izquierda .item img {
        height: clamp(24px, 4vw, 36px);
    }

    .columna.hoy .item .texto {
        font-size: clamp(2rem, 5vw, 5rem);
    }

    .columna.hoy .item img {
       .columna.hoy .item img {
        height: clamp(80px, 20vw, 240px);
        max-width: 32vw;
        object-fit: contain;
    }

    .banner1 .frase1,
    .banner1 .Nbanner1 {
        font-size: clamp(1rem, 3vw, 2.2rem);
    }
}
	
@media screen and (min-width: 1024px) {
    .columna.izquierda {
        padding-top: 2vh;
    }
}
@media screen and (min-width: 1200px) {
    .image-container {
        padding-left: 4vw;
    }
}