/*   
  Theme Name: Estaciones Meteorologicas 2022-2028
  Author: Depto. Maquetacion y Desarrollo Digital 
  Version: 1.0
*/

*,
::after,
::before {
    box-sizing: border-box;
}

html {
    width: 100%;
    height: 100%;
    scroll-behavior: smooth;
    /*  display: table;*/
    overflow-x: hidden;
}

body {
    font-size: clamp(0.95rem, 1.2vw, 1.05rem);
    /* ~15.2px–16.8px */
    line-height: 1.6;
    font-weight: 400;
    color: var(--body);
    font-family: var(--font);
}

p {
    margin-bottom: 1rem;
    font-family: var(--font-open);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font);
    margin: 0;
}

h1 {
    font-size: clamp(2rem, 5vw, 2.5rem);
    /* 32px–40px */
    /*line-height: 1.2;*/
    font-weight: 700;
}

h2 {
    font-size: clamp(1.75rem, 4vw, 2rem);
    /* 28px–32px */
    /*line-height: 1.3;*/
    font-weight: 600;
}

h3 {
    font-size: clamp(1.5rem, 3.5vw, 1.75rem);
    /* 24px–28px */
    /*line-height: 1.3;*/
    font-weight: 600;
}

h4 {
    font-size: clamp(1.25rem, 3vw, 1.5rem);
    /* 20px–24px */
    /*line-height: 1.4;*/
    font-weight: 500;
}

h5 {
    font-size: clamp(1.125rem, 2.5vw, 1.25rem);
    /* 18px–20px */
    /*line-height: 1.4;*/
    font-weight: 500;
}

h6 {
    font-size: clamp(1rem, 2vw, 1rem);
    /* 16px */
    /*line-height: 1.5;*/
    font-weight: 500;
}

a {
    text-decoration: none;
    color: var(--vino);
}

a:hover {
    color: var(--dorado);
    text-decoration: underline;
    transition: color 0.3s ease, transform 0.2s ease;
}

:focus-visible {
    outline: 2px dashed var(--dorado);
    outline-offset: 2px;
}

/* Mejor foco para links y botones */
a:focus,
button:focus {
    /*outline: 2px dashed var(--dorado);*/
    outline-offset: 2px;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Formularios */
.form-check-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(171, 23, 56, 0.25);
}

.form-control:focus {
    box-shadow: none;
}

/* ===============================
  Definir colores
================================== */
:root {
    --body: #4A5565;
    --font: 'Encode Sans', sans-serif;
    --font-open: "Open Sans", sans-serif;
    --vino: #AB1738;
    --dorado: #BC955B;
    --gris: #53565A;
    --beige: #E6D5B5;
    --vino-o: #4e0b15;
    --vino-2: #7A0821;
    /* ===============================
     Paleta en formato RGB
  =============================== */
    --body-rgb: 86, 91, 95;
    --vino-rgb: 171, 23, 56;
    --dorado-rgb: 188, 149, 91;
    --gris-rgb: 83, 86, 90;
    --beige-rgb: 252, 251, 248;
    --vino-o-rgb: 78, 11, 21;
}

.ff-open {
    font-family: var(--font-open);
}

/* ===============================
   Utilidades de Color – Texto
================================== */
.text-body {
    color: var(--body) !important;
}

.text-vino {
    color: var(--vino) !important;
}

.text-vino-o {
    color: var(--vino-o) !important;
}

.text-dorado {
    color: var(--dorado) !important;
}

.text-gris {
    color: var(--gris) !important;
}

.text-beige {
    color: var(--beige) !important;
}


/* ===============================
   Utilidades de Color – Fondo
================================== */
.bg-body {
    background-color: var(--body) !important;
}

.bg-vino {
    background-color: var(--vino) !important;
}

.bg-vino-2 {
    background-color: var(--vino-2) !important;
}

.bg-vino-o {
    background-color: var(--vino-o) !important;
}

.bg-dorado {
    background-color: var(--dorado) !important;
}

.bg-gris {
    background-color: var(--gris) !important;
}

.bg-beige {
    background-color: var(--beige) !important;
}


/* ===============================
   Utilidades de Color – Bordes
================================== */
.border-vino {
    border-color: var(--vino) !important;
}

.border-vino-o {
    border-color: var(--vino-o) !important;
}

.border-dorado {
    border-color: var(--dorado) !important;
}

.border-gris {
    border-color: var(--gris) !important;
}

/* ===============================
   Boton y Hover
================================== */
.btn-vino {
    background-color: var(--vino) !important;
    color: #fff !important;
    border: none !important;
    transition: all 0.25s ease;
    will-change: transform;
}

.btn-vino:hover,
.btn-vino:focus {
    background-color: var(--vino-o) !important;
    color: #fff !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.10), 0 8px 18px rgba(171, 23, 56, 0.22);
    transform: translateY(-1px);
}

/*scroll*/
body.is-sticky .icon-llave img {
    max-height: 22px;
    transform: scale(0.96);
    transition:
        max-height 0.4s ease-in-out,
        transform 0.4s ease-in-out,
        opacity 0.4s ease-in-out;
    will-change: max-height, transform, opacity;
}

/* ===============================
   Scroll Top / Preloader
================================== */
.scroll-top {
    position: fixed;
    right: 20px;
    bottom: 80px;
    cursor: pointer;
    width: 60px;
    height: 60px;
    display: none;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: transparent;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, box-shadow 0.3s ease;
    z-index: 9999;
}

.scroll-top:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.progress-circle {
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(-90deg);
}

.progress-circle circle {
    fill: none;
    stroke-width: 5;
}

.progress-circle .progress {
    stroke: var(--vino);
    fill: #fff;
    stroke-dasharray: 157;
    stroke-dashoffset: 157;
    transition: stroke-dashoffset 0.2s linear;
}

.scroll-top .arrow {
    position: relative;
    font-size: 20px;
    color: var(--vino);
    pointer-events: none;
    animation: pulse 1.5s infinite;
}

/* Animación pulso */
@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.85;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/*Preloader*/
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    transition: opacity 0.4s ease;
}

/* Animación spinner */
.spinner {
    width: 70px;
    height: 70px;
    border: 5px solid rgba(171, 23, 56, 0.2);
    /* var(--vino) con opacidad */
    border-top-color: var(--vino);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ===============================
  Modal Ubicacion
================================== */
.modal-ubi-custom {
    border-radius: 18px;
    border: none;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .25);
}

.custom-close {
    position: absolute;
    top: 18px;
    right: 18px;
}

.ubi-circle {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: #edd7dc;
    color: #8d1d2c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
}

.btn-outline-vino {
    border: 1px solid #8d1d2c;
    color: #8d1d2c;
    background: #fff;
}

.btn-outline-vino:hover {
    background: #8d1d2c;
    color: #fff;
}


/* ===============================
  Header
================================== */
#header {
    z-index: 9999;
    width: 100%;
    background-color: #fff;
    transition: background-color 0.4s ease, box-shadow 0.3s ease;
    position: relative;
    box-shadow: 0px 20px 50px 0px #0000001A;
}

#row-menu-header {
    height: 80px;
    transition: background 0.3s ease;
}

body.is-sticky #contenido-fix {
    position: fixed;
    top: var(--adminbar, 0px);
    left: 0;
    right: 0;
    z-index: 1100;
    /*background: var(--vino);*/
    background-color: #fff;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    opacity: 0.95;
    transition: opacity 0.4s ease, box-shadow 0.4s ease;
}

body.is-sticky #contenido-fix.is-visible {
    opacity: 1;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

/* El spacer evita el salto de contenido */
#header-spacer {
    height: 0;
    transition: none;
}

/* Logo */
#header .logo-home {
    z-index: 1;
    transition: all 0.4s ease-in-out;
    height: 80px;
    position: relative;
}

#header .logo-home .img-logo-home {
    max-height: 60px;
    transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
    transform-origin: left;
}

body.is-sticky #header .logo-home .img-logo-home {
    max-height: 50px;
    transform: scale(0.9);
    opacity: 0.9;
}

/* Nav */
body.is-sticky #menu-container li a {
    font-size: clamp(0.85rem, .95vw, 0.95rem);
    padding: 10px 6px
}

/*si tiene submenu*/
/* body.is-sticky #menu-container li a {
  font-size: clamp(0.85rem, 1vw, 0.95rem);
  padding: 6px 25px 6px 6px;
}*/

/* =========================
   Nav estilos menu/submenus
   ========================= */
#menu-container {
    display: flex;
    align-items: center;
    height: 100%;
}

#menu-menu-principal {
    display: flex;
    align-items: center;
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Los li de submenús vuelven a ser bloques normales */
#menu-menu-principal li ul li {
    display: block;
    height: auto;
    align-items: initial;
}

#menu-container li {
    float: left;
    border: 0;
    transition: all .3s ease;
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

#menu-container li a {
    font-size: clamp(0.85rem, 1vw, 1rem);
    padding: 10px 8px;
    font-family: var(--font);
    white-space: nowrap;
    display: flex;
    align-items: center;
    position: relative;
    color: var(--body);
    line-height: normal;
    font-weight: 300;
    text-align: center;
    text-decoration: none;
    transition: color 0.4s ease-in-out, transform 0.4s ease-in-out, opacity 0.4s ease-in-out, padding 0.4s ease-in-out;
}

#menu-container li a::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 50%;
    width: 0%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.4);
    transition: all 0.4s ease-in-out;
    transform: translateX(-50%);
}

#menu-container li a:hover {
    color: rgba(var(--dorado-rgb), 0.85);
    transform: translateY(-1px);
    opacity: 0.9;
}

#menu-container li a:hover::after {
    width: 70%;
    background-color: rgba(255, 255, 255, 0.6);
}

/*Activo para scroll*/
#menu-container a.active-section {
    color: var(--vino);
    font-weight: 600;
}

#menu-container a.active-section::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 50%;
    width: 0%;
    height: 1px;
    width: 70%;
    background-color: var(--vino);
    transition: all 0.4s ease-in-out;
    transform: translateX(-50%);
}

#menu-container li a.active-section:hover {
    color: rgba(var(--vino-o-rgb), 0.85);
}

/*pendiente*/
#menu-container li a.active-section:hover::after {
    background-color: rgba(var(--vino-o-rgb), 0.85);
}

/* ===============================
  Listón tabs sticky (debajo header)
================================== */
.tabs-sticky {
    /*height: 55px;*/
    background: #7A0821;
}

/* altura del listón (ajústala a tu gusto) */
.tabs-sticky-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0;
    margin: 0;
    flex-wrap: nowrap;
    height: 100%;
}

/* opcional: ocultar scrollbar en tabs */
.tabs-sticky-nav::-webkit-scrollbar {
    height: 6px;
}

.tabs-sticky-nav::-webkit-scrollbar-thumb {
    border-radius: 10px;
}

/* look & feel (puedes adaptar a tus vars) */
.tabs-sticky-nav .nav-link {
    white-space: nowrap;
    font-weight: 400;
    font-size: clamp(0.75rem, 1vw, 1rem);
    padding: 6px 5px;
    color: #fff;
    position: relative;
    transition: color 0.4s ease-in-out, transform 0.4s ease-in-out, opacity 0.4s ease-in-out, padding 0.4s ease-in-out;
}

.tabs-sticky-nav .nav-link.active {
    background: transparent;
    color: var(--dorado);
}

.tabs-sticky-nav .nav-link.active::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 50%;
    width: 0%;
    height: 1px;
    width: 70%;
    background-color: var(--dorado);
    transition: all 0.4s ease-in-out;
    transform: translateX(-50%);
}

/* estilo visual del tab de mapa */
.tabs-sticky-nav .nav-link.scroll-active {
    background: transparent;
    color: var(--dorado);
}

.tabs-sticky-nav .nav-link.scroll-active::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 50%;
    width: 0%;
    height: 1px;
    width: 70%;
    background-color: var(--dorado);
    transition: all 0.4s ease-in-out;
    transform: translateX(-50%);
}

/* Cuando el mapa está activo, apagar visual del tab-1 */
#tabsSecciones.mapa-activo #tab-1.active {
    color: #fff !important;
}

#tabsSecciones.mapa-activo #tab-1.active::after {
    width: 0 !important;
    opacity: 0 !important;
}

/* cuando esté sticky, todo el contenido-fix*/
/*body.is-sticky #tabs-sticky{}*/
body.is-sticky #tabs-sticky .tabs-sticky-nav .nav-link {
    padding: 6px 10px;
    font-size: clamp(0.65rem, .95vw, 0.85rem);
}

/* ===============================
  Boton Llave Mx
================================== */
.btn.btn-llave {
    border: 1.5px solid;
    font-weight: 500;
    font-size: clamp(9px, 2vw, 14px);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0;
    transition:
        background-color 0.35s ease-in-out,
        color 0.35s ease-in-out,
        border-color 0.35s ease-in-out,
        opacity 0.35s ease-in-out,
        padding 0.35s ease-in-out,
        transform 0.35s ease-in-out;
}

.btn.btn-llave img {
    max-height: 26px;
    border-right: 1px solid var(--dorado);
    padding-right: 10px;
    margin-right: 10px;
}

.img-normal {
    transition: opacity 0.3s ease;
}

.btn-llave:hover .img-normal {
    display: none;
}

.btn-llave:hover .img-hover {
    display: block !important;
}

.btn.border-vino-o:hover {
    border-color: var(--vino-o);
    opacity: .9;
    color: var(--vino-o);
}

.btn.btn-llave:hover {
    background-color: var(--vino-o) !important;
    color: #fff !important;
}

/*contenido sticky*/
body.is-sticky .tabs-sticky .btn.btn-llave {
    --bs-btn-padding-x: 0.55rem;
    --bs-btn-padding-y: 0.175rem;
}

/* =========================
   Menu Responsivo
   ========================= */
.menu-responsivo .offcanvas-backdrop {
    display: none !important;
}

#header #barras-boton {
    cursor: pointer;
}

#header .nav-bars i {
    font-size: 30px;
    padding: 8px;
    color: var(--vino);
    border: 1px solid var(--vino);
    border-radius: 5px;
    cursor: pointer;
}

#header .menu-responsivo .offcanvas-header img {
    max-height: 45px;
}

#header .menu-responsivo .offcanvas-body .footer {
    font-size: 7px;
    line-height: normal;
}

#header .menu-responsivo .offcanvas-body .footer .logo-r img {
    max-height: 80px;
}

#row-menu-movil {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

/*estilos menu*/
.nav-menu {
    position: relative;
    width: 100%;
}

.nav-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-menu li {
    position: relative;
}

.nav-menu li a {
    display: block;
    padding: 10px 40px 10px 15px;
    text-decoration: none;
    transition: color 0.3s;
    color: var(--vino-o);
}

.nav-menu li a.sub-open {
    font-weight: bold;
}

.nav-menu li.padre>a {
    display: block;
    position: relative;
    padding: 10px 40px 10px 15px;
    text-decoration: none;
}

.nav-menu li.padre>a::after {
    content: "\f078";
    font-family: "FontAwesome";
    font-weight: 900;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.3s;
}

.nav-menu li.padre.open>a::after {
    transform: translateY(-50%) rotate(180deg);
    color: var(--primario);
}

.nav-menu .sub-menu.hijo {
    display: none;
    padding-left: 15px;
}

#row-menu-movil::-webkit-scrollbar {
    -webkit-appearance: none;
}

#row-menu-movil::-webkit-scrollbar:vertical {
    width: 10px;
}

#row-menu-movil::-webkit-scrollbar-button:increment,
#row-menu-movil::-webkit-scrollbar-button {
    display: none;
}

#row-menu-movil::-webkit-scrollbar:horizontal {
    height: 10px;
}

#row-menu-movil::-webkit-scrollbar-thumb {
    background-color: #797979;
    border-radius: 20px;
    border: 3px solid #f1f2f3;
}

#row-menu-movil::-webkit-scrollbar-track {
    border-radius: 10px;
}

/*fin header*/

/* ===============================
   Footer
================================== */
#footer #terminos-y-condiciones {
    font-size: 10px;
    background: #333333;
    color: #ddd;
    border-top: 13px solid var(--vino);
}

#footer #terminos-y-condiciones b {
    font-size: 11px;
}

/*fin*/

/******************************
** Secciones *****
*******************************/
.section-margin {
    margin-bottom: 100px;
}

/* Letter spacing utilities */
.ls-0 {
    letter-spacing: 0;
}

.ls-05 {
    letter-spacing: .05em;
}

.ls-1 {
    letter-spacing: .1em;
}

.ls-15 {
    letter-spacing: .15em;
}

.ls-2 {
    letter-spacing: .2em;
}


/* ===============================
   Hero
================================== */
#hero {
    background-image: url('../img/secciones/hero.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 740px;
}

#hero h2 {
    font-size: clamp(20px, 3vw, 36px);
    background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.70) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#hero p {
    font-size: clamp(16px, 2.3vw, 23px);
    line-height: 1.2;
}

#hero .info-clima {
    overflow: hidden;
    border-radius: 40px;
    border: 1px solid rgba(255, 255, 255, 0.20);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.18) 100%);
    box-shadow: 0 40px 80px -12px rgba(0, 0, 0, 0.50), 0 0 0 1px rgba(255, 255, 255, 0.20) inset, 0 2px 20px 0 rgba(255, 255, 255, 0.20) inset;
}

.bg-verde {
    border: 1px solid rgba(0, 201, 80, 0.30);
    background: #00C950;
    box-shadow: 0 4px 12px 0 rgba(188, 149, 91, 0.20);
}

.bg-verde:hover {
    background: rgb(0 201 80 / 85%);
}

.bg-verde i.fa-circle {
    font-size: 8px;
}

/* ====== BLOQUE CENTRAL (icono + temperatura) ====== */
#hero .clima-main {
    margin-top: 6px;
}

#hero .clima-icon img {
    max-height: 110px;
}

#hero .clima-temp {
    display: inline-flex;
    line-height: 1;
    height: 100%;
    align-items: end;
    background: linear-gradient(180deg, #FFF 0%, #FFF 50%, rgba(255, 255, 255, 0.60) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: clamp(60px, 9vw, 95px);
}

#hero .clima-temp .temp-num {
    font-weight: 800;
    letter-spacing: -1px;
    line-height: normal;
}

#hero .clima-temp .temp-deg {
    font-weight: 800;
    line-height: 1;
}

#hero .metric-pill {
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(10px);
}

#hero .metric-pill strong {
    font-weight: 800;
}

#hero .clima-card {
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .07);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

#hero .clima-card-ico {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px auto;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .18);
    font-size: 18px;
}

#hero .clima-card-ico img {
    max-height: 20px;
}

#hero .clima-card-label {
    font-size: 11px;
    letter-spacing: .14em;
    font-weight: 700;
    opacity: .95;
}

#hero .clima-card-value {
    font-size: 18px;
    line-height: normal;
}

#hero .clima-card-value span {
    opacity: .95;
}

#hero .clima-updated {
    font-size: 10px;
    letter-spacing: .12em;
    opacity: .85;
}

/*flip card hero*/
/*para safari*/
#hero .clima-flip-swiper,
#hero .clima-flip-swiper .swiper-wrapper,
#hero .clima-flip-swiper .swiper-slide {
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* #hero .clima-flip-swiper {
    width: 100%;
} */
#hero .clima-flip-swiper {
    perspective: 1200px;
    -webkit-perspective: 1200px;
}

/* #hero .clima-flip-swiper .swiper-slide {
    height: 100%;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
} */
#hero .clima-flip-swiper .swiper-slide>* {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}


#hero .clima-flip-swiper .swiper-button-prev {
    left: -35px;
}

#hero .clima-flip-swiper .swiper-button-next {
    right: -35px;
}

#hero .clima-flip-swiper .swiper-button-prev,
#hero .clima-flip-swiper .swiper-button-next {
    color: #fff;
    width: 42px;
    height: 42px;
}

#hero .clima-flip-swiper .swiper-button-prev::after,
#hero .clima-flip-swiper .swiper-button-next::after {
    font-size: 18px;
    font-weight: 700;
}

/*fin card hero*/

/* Segunda pantalla flip - análisis */
#hero .info-clima-analisis {
    min-height: 500px;
    overflow: hidden;
}

#hero .analisis-subtitle {
    font-size: 11px;
    letter-spacing: .45em;
    opacity: .65;
}

#hero .info-clima-analisis h2 {
    font-size: 16px;
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: #fff;
    color: #fff;
}

#hero .analisis-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

}

#hero .analisis-item:not(:nth-child(3n)) {
    border-right: 1px solid rgba(255, 255, 255, .15);
}

#hero .analisis-item:nth-child(n+4) {
    border-top: 1px solid rgba(255, 255, 255, .15);
}

#hero .analisis-item {
    min-height: 145px;
    padding: 18px 16px 16px;
    display: grid;
    grid-template-rows: 1fr auto;
    align-items: center;
    justify-items: center;
}

#hero .analisis-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#hero .analisis-label {
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    opacity: .72;
}

#hero .analisis-label,
#hero .analisis-desc {
    font-size: 12px;
}

#hero .analisis-desc {
    letter-spacing: .08em;
    opacity: .65;
    line-height: 1.1;
}

#hero .analisis-value {
    font-size: clamp(20px, 3vw, 30px);
    font-weight: 800;
    line-height: 1;
}

#hero .analisis-value span {
    font-size: .55em;
}

#hero .analisis-unit {
    font-size: 11px;
    opacity: .68;
}

#hero .analisis-pill {
    margin-top: auto;
    min-width: 105px;
    border-radius: 999px;
    border: 1px solid rgba(188, 149, 91, .45);
    color: #d5aa65;
    font-weight: 700;
    font-size: 14px;
    background: rgba(188, 149, 91, .08);
}

/*fin hero*/
/* ===============================
   Liston Alerta "Hero" y Modal
================================== */
.liston-alerta {
    background: #EE010C;
    font-family: var(--font-open);
}

.liston-alerta .icon-pill {
    width: 32px;
    height: 32px;
}

.modal {
    z-index: 100000 !important;
}

.modal-backdrop {
    z-index: 99999 !important;
}

.modal-alerta {
    border: 0;
    border-radius: 20px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .18);
    position: relative;
}

.modal-alerta-close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 5;
    background-color: rgba(255, 255, 255, .85);
    border-radius: 999px;
    padding: 12px;
}

.modal-alerta-media {
    min-height: 520px;
    background: #111;
}

.media-gradient {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 45%;
    background: linear-gradient(to top, rgba(0, 0, 0, .75), rgba(0, 0, 0, 0));
}

.media-badge {
    position: absolute;
    left: 22px;
    bottom: 120px;
}

.media-badge .badge {
    background: #c40018;
    font-weight: 800;
    letter-spacing: .3px;
}

.media-caption {
    position: absolute;
    left: 22px;
    bottom: 28px;
    right: 22px;
}

#modalAlertaHuracan .kpi-card {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    height: 100%;
}

.kpi-card {
    background: #f7fafc;
    border: 1px solid #e9ecef;
    border-radius: 16px;
    padding: 14px 14px;
    display: flex;
    gap: 12px;
    align-items: center;
}

.kpi-ico {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: #0b1b2a;
    font-size: 18px;
}

.kpi-title {
    font-size: .78rem;
    font-weight: 800;
    color: #516070;
    text-transform: uppercase;
}

.kpi-value {
    font-size: 1.25rem;
    font-weight: 900;
    color: #1e2a35;
    line-height: 1.15;
}

.kpi-sub {
    font-size: .85rem;
    color: #7a8794;
}

.trayectoria-box {
    background: #fbf7ef;
    border-radius: 16px;
    border: 1px solid #f1e6cf;
    color: var(--vino);
}

.tray-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.prec-list li {
    color: #5d666f;
    display: flex;
    align-items: center;
    gap: 5px;
}

.prec-list li::before {
    content: "\f111";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #d31d2b;
    font-size: 7px;
}

.modal-alerta-footer {
    border-top: 1px solid #e9ecef;
    background: #f3f3f3;
}

/* Colores de íconos KPI */
.bg-azul {
    background: #dcecff;
    color: #1b5cff;
}

.bg-morado {
    background: #efe2ff;
    color: #7b2cff;
}

.bg-naranja {
    background: #ffe7d5;
    color: #e05a00;
}

.bg-celeste {
    background: #dff4ff;
    color: #0077b6;
}

/* ===============================
   Informacion General
================================== */
.mh-20 {
    max-height: 20px;
}

.mh-15 {
    max-height: 15px;
}

.icon-pill {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    font-size: 20px;
}

.icon-pill img {
    max-height: 32px;
}

.circle-wrap img {
    max-height: 435px;
}

/* ===============================
   Comparativa de Datos
================================== */
#comparativa-datos {
    background: #FAF7F0;
}

.card-comparativa {
    border-radius: 20px;
    padding: 55px 30px 40px;
    color: #fff;
    position: relative;
    overflow: visible;
    text-align: center;
}

.icon-circle {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: var(--dorado);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    position: absolute;
    top: -55px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .15);
}

.icon-circle img {
    max-height: 55px;
}

/* ===============================
   Datos de valor agregado
================================== */
.va-card {
    border-radius: 18px;
    padding: 28px;
    border: 2px solid transparent;
}

.va-title {
    font-weight: 700;
    font-size: 1.1rem;
    color: #4b4b4f;
}

.va-icon {
    width: 54px;
    height: 54px;
    border-radius: 999px;
}

.va-icon img {
    max-height: 30px;
}

.va-kpi {
    font-size: 32px;
    letter-spacing: -0.5px;
}

.va-unit {
    font-size: 1.2rem;
    font-weight: 700;
}

/* Texto */
.va-text {
    color: #5a5a60;
    font-weight: 500;
}

/* ====== Variantes ====== */
/* Aire */
.va-aire {
    border-color: #8f8f95;
    background: #F2F2F2;
}

.va-icon-aire {
    background: #dedee1;
    color: #5b5b60;
}

.border-gray {
    background: #e5e5e7 !important;
    border-color: #cfcfd4 !important;
    color: #4f4f55;
}

/* Riego */
.va-riego {
    border-color: #c7a15a;
    background: #efe4d2;
}

.va-title-riego,
.va-kpi-riego,
.va-text-riego {
    color: #b98b3f;
}

.va-icon-riego {
    background: #e7d3b4;
    color: #b98b3f;
}

.border-dorado {
    background: #ecd7b8 !important;
    border-color: #d7b27a !important;
    color: #b98b3f;
}

/* Viento */
.va-viento {
    border-color: #a61f35;
    background: #f2dce0;
}

.va-title-viento,
.va-kpi-viento,
.va-text-viento {
    color: #a61f35;
}

.va-icon-viento {
    background: #eac2c9;
    color: #a61f35;
}

.border-vino {
    background: #f6e6e9 !important;
    border-color: #a61f35 !important;
    color: #a61f35;
}

/* ===============================
   Cobertura Red (Mapa)
================================== */
#cobertura-red {
    background: #FAF7F0;
}

.mapa-inicio {
    height: 693px;
    width: 100%;
}

.city-label {
    background: transparent;
    border: none;
    box-shadow: none;
    color: #333;
    font-size: 10px;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
    padding: 4px !important;
}

.leaflet-tooltip.city-label:before {
    display: none;
}

/* Mapa página interior */
.map-container {
    position: relative;
}

.map-info {
    position: absolute;
    top: 20px;
    z-index: 1000;
    pointer-events: auto;
}

.map-info .btn {
    font-size: 14px;
}

.map-info-right {
    background-color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
}

.map-info-right-desc {
    font-size: 12px;
}

/* Estilos del card de estaciones dentro del mapa */
.leaflet-popup-content-wrapper {
    padding: 30px 20px 20px;
    border-radius: 8px;
}

.leaflet-popup-content {
    margin: 0;
    max-width: 300px !important;
    width: 75vw !important;
}

.leaflet-fade-anim .leaflet-map-pane .leaflet-popup>a.leaflet-popup-close-button span {
    color: var(--bs-gray);
    opacity: 1;
    font: 25px / 25px Encode, sans, sans-serif;
    font-weight: lighter;
}

/* Ocultar el botón de cerrar del popup */
/* .leaflet-fade-anim .leaflet-map-pane .leaflet-popup > a.leaflet-popup-close-button{
  display: none;
} */

.leaflet-popup-tip-container {
    display: none;
}

/* Botón cerrar del modal */
.modal-header .btn-close {
    filter: invert(100%);
    opacity: 1;
}

/* Por defecto, la barra sí es clickeable */
.map-info {
    pointer-events: auto;
}

/* Cuando hay popup abierto, deja pasar los clics al mapa/popup */
.map-container.popup-open .map-info {
    pointer-events: none;
}

.map-container:not(.map-active) #map-estaciones {
    cursor: pointer;
}

/* Asegura que el popup sí reciba clics */
.leaflet-popup,
.leaflet-popup-content-wrapper,
.leaflet-popup-content {
    pointer-events: auto;
}

.leaflet-container a.leaflet-popup-close-button {
    top: 2px !important;
    right: 2px !important;
}

/* =========================================================
   Cuando un popup esté abierto, la barra superior baja (pendiente a revision "desaparece")
========================================================= */
.map-info {
    position: absolute;
    top: 20px;
    z-index: 1000;
    pointer-events: auto;
    transition: z-index .2s ease;
}

.map-container.popup-open .map-info {
    pointer-events: none;
    z-index: 1;
}

.map-container #map-estaciones {
    position: relative;
    z-index: 10;
}

.map-container .leaflet-pane.leaflet-popup-pane {
    z-index: 2000 !important;
}

.map-container .leaflet-popup {
    z-index: 2001 !important;
}

/* ===============================
  breadcrumb-container
================================== */
.breadcrumb-sm {
    font-size: .8rem;
    line-height: 1.2;
}

.breadcrumb-sm .fa-house {
    font-size: .75rem;
    position: relative;
    top: -1px;
}

.breadcrumb-sm .breadcrumb-item+.breadcrumb-item::before {
    content: ">";
}

/* ===============================
  Card`s estaciones meteorologicas
================================== */
/* Toolbar */
.segmented {
    background: #fff;
    border: 1px solid #e7eaee;
    border-radius: 14px;
    padding: 6px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.seg-btn {
    border: 0;
    background: transparent;
    color: #667085;
    padding: 5px 17px;
    border-radius: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

.seg-btn.is-active {
    background: var(--vino);
    color: #fff;
}

.view-toggle {
    background: #fff;
    border: 1px solid #e7eaee;
    border-radius: 14px;
    padding: 6px;
    display: flex;
    gap: 6px;
}

.view-btn {
    width: 40px;
    height: 37px;
    border-radius: 12px;
    border: 0;
    background: transparent;
    color: #98A2B3;
    display: grid;
    place-items: center;
    font-size: 18px;
}

.view-btn.is-active {
    background: #F1F5F9;
    color: var(--vino);
}

.search-wrap {
    position: relative;
    background: #fff;
    border: 1px solid #e7eaee;
    border-radius: 14px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 400px;
}

.search-wrap i {
    color: #98A2B3;
}

.station-search {
    border: 0 !important;
    box-shadow: none !important;
    padding: 12px 6px !important;
}

/*Cards estaciones*/
.bg-disabled {
    border: 1px solid rgba(255, 255, 255, 0.20);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.18) 100%);
    box-shadow: 0 40px 80px -12px rgba(0, 0, 0, 0.50), 0 0 0 1px rgba(255, 255, 255, 0.20) inset, 0 2px 20px 0 rgba(255, 255, 255, 0.20) inset;
}

.bg-card-disabled {
    filter: grayscale(1);
}

.station-card .btn {
    height: fit-content;
    cursor: default;
}

.station-card .city {
    font-size: .85rem;
}

.station-card {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 16px 36px rgba(16, 24, 40, .12);
    border: 1px solid rgba(231, 234, 238, .7);
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.station-bg-image {
    height: 225px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.station-bg-overlay {
    position: absolute;
    inset: 0;
    /*background: rgba(141, 29, 44, .55);*/
    background: linear-gradient(180deg, rgba(171, 23, 56, 0.80) 0%, rgba(99, 24, 50, 0.70) 50%, rgba(78, 11, 21, 0.90) 100%);
}

.station-clima img {
    max-height: 80px;
}

.station-temp {
    font-weight: 700;
    font-size: 3.2rem;
    letter-spacing: -1px;
}

.station-temp .deg {
    font-size: 1.4rem;
    font-weight: 900;
    margin-left: 2px;
    line-height: normal;
}

.small-value {
    font-size: 1.5rem;
    font-weight: 900;
}

/* Tabs line */
.station-tabs {
    display: flex;
    justify-content: center;
    gap: 0;
    border-bottom: 1px solid #e7eaee;
    background: #fff;
}

.station-tab {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 14px 10px;
    font-weight: 500;
    color: #667085;
    position: relative;
}

.station-tab.is-active {
    color: var(--vino);
}

.station-tab.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--vino);
    border-radius: 999px;
}

.station-panel {
    display: none;
}

.station-panel.is-active {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/*tab datos actuales*/
.station-content {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 414px;
    /*padding-bottom: 18px;*/
}

.station-metrics {
    /*padding: 18px;*/
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

/*
.station-metrics>*:last-child {
    grid-column: 1 / -1;
}
*/

.bg-dorado-pill {
    max-width: 105px;
    border-radius: 999px;
    border: 1px solid rgba(188, 149, 91, .45);
    color: #d5aa65;
    font-size: 14px;
    background: rgba(188, 149, 91, .08);
    justify-content: center;
    margin-top: auto;
}

.bg-dorado-pill:hover {
    color: #d5aa65;
    border: 1px solid rgba(188, 149, 91, .45);
    background: rgba(188, 149, 91, .08);
}

.metric {
    background: #f7f7f8;
    border-radius: 14px;
    padding: 14px;
    display: flex;
    flex-direction: column;
}

.metric-label {
    display: flex;
    align-items: center;
    font-size: .72rem;
    color: #667085;
    letter-spacing: .2px;
    margin-bottom: 6px;
}

.metric-value {
    font-size: 1.35rem;
    font-weight: 800;
    color: #101828;
}

.metric-value span {
    font-size: .85rem;
    font-weight: lighter;
    color: #667085;
}

.station-cta {
    margin-top: auto;
    padding: 10px 18px 18px;
    background: #fff;
    display: flex;
    align-items: center;
}


/* tab interpretacion - scroll */
.interp-pad {
    padding: 18px 10px 0 18px;
}

.interp-scroll {
    overflow-y: auto;
    padding-right: 6px;
    max-height: 377px;
    padding-bottom: 10px;
    font-size: 14px;
}

.interp-scroll::-webkit-scrollbar {
    width: 12px;
}

.interp-scroll::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .15);
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: padding-box;
}

.interp-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.bg-mini-cards {
    background: #F5EFE7;
    border-radius: 18px;
    padding: 14px;
    color: #4b5563;
}


.mini-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 10px 0;
}

.interp-alert i {
    color: #f4b400;
}

/*paginacion cards*/
.pagination-custom {
    border: 1px solid #dee2e6;
    border-radius: 10px;
    overflow: hidden;
    display: inline-flex;
}

.pagination-custom .page-item .page-link {
    border: none;
    border-right: 1px solid #dee2e6;
    color: #555;
    padding: 10px 16px;
    background: #f8f9fa;
    transition: all 0.2s ease;
}

.pagination-custom .page-item:last-child .page-link {
    border-right: none;
}

.pagination-custom .page-link:hover {
    background: #e9ecef;
    color: #000;
}

.pagination-custom .page-item.active .page-link {
    background-color: var(--vino, #AB1738);
    color: #fff;
    font-weight: 600;
}

.pagination-custom .info {
    background: #fff;
    font-weight: 500;
    color: #666;
    cursor: default;
}

.pagination-custom {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.pagination-custom .page-link {
    font-size: 14px;
}

.pagination-custom .page-item.active .page-link {
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.1);
}

.page-link:focus {
    box-shadow: none !important
}

/*card vista normal*/
.stations-wrap.view-grid .filter-cards {
    display: none;
}

/* ===== card chicas para filtros ===== */
/* Cuando esté en LIST, fuerza a 4 columnas en LG */
#stationsWrap.view-list>.col-lg-4 {
    flex: 0 0 auto;
    width: 25%;
}

.stations-wrap.view-list .station-tabs,
.stations-wrap.view-list .station-metrics,
.stations-wrap.view-list .interp-pad,
.stations-wrap.view-list .station-cta,
.stations-wrap.view-list .btn-linea-card {
    display: none !important;
}

.stations-wrap.view-list .station-mini-stats,
.stations-wrap.view-list .station-list-cta,
.stations-wrap.view-list .icon-card-list {
    display: block;
}

.stations-wrap.view-list .station-bg-image {
    max-height: 175px;
}

.stations-wrap.view-list .list-minis {
    display: flex;
    flex-direction: row-reverse;
    height: 100%;
}

.stations-wrap.view-list .list-minis .station-clima,
.stations-wrap.view-list .list-minis .station-grados {
    width: 50%;
}

.stations-wrap.view-list .station-mini-stats .metric-label strong {
    font-size: .85rem !important;
}

.stations-wrap.view-list .list-minis .station-grados {
    flex-direction: column;
    align-items: flex-start !important;
    justify-content: space-evenly !important;
}

.stations-wrap.view-list .list-minis .station-sensacion span {
    display: none;
}

.stations-wrap.view-list .list-minis .station-sensacion .text-sens {
    color: #BC955B;
    font-weight: 600;
    font-size: .60rem;
    margin-bottom: 5px !important;
}

.stations-wrap.view-list .list-minis .station-sensacion {
    text-align: start !important;
    padding: 8px 15px;
    color: #E6D5B5;
    text-transform: uppercase;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.20);
    background: rgba(255, 255, 255, 0.10);
}

.stations-wrap.view-list .list-minis .station-sensacion .small-value {
    font-size: .90rem;
}

.stations-wrap.view-list .icon-card-list {
    display: flex;
}

.stations-wrap.view-list .list-minis .station-clima {
    display: flex;
    flex-direction: column;
    text-align: right;
    font-weight: 600;
    justify-content: space-evenly;
    align-items: end;
}

.stations-wrap.view-list .list-minis .station-clima img {
    max-width: 65px;
    max-height: 65px;
}

/**/
.icon-card-list {
    display: none;
}

.icon-card-list i {
    color: #00C950;
    font-size: .55rem;
}

.filter-cards {
    padding: 18px;
}

.station-list-ver {
    padding-top: 18px;
}

.station-list-ver .btn {
    font-size: 14px;
}

.btn-mini {
    width: 25px;
    height: 25px;
    padding: 0;
}

.btn-mini i {
    color: #667085;
    font-size: .72rem;
}

/* ============================
   Media Queries – Bootstrap 5
   Desktop First (con herencia)
============================ */
/*  Ultra grandes (≥1600px) – Monitores 4K */
@media (max-width: 1599.98px) {
    /* Ajustes opcionales para pantallas muy grandes */
}


/* Extra grandes (≥1400px y <1600px) – Bootstrap xxl */
@media (max-width: 1399.98px) {
    /*.container { background-color: #d0f0c082; } */
    /* verde limon */

}

/* Grandes (≥1200px y <1400px) – Bootstrap xl */
@media (max-width: 1199.98px) {
    /*.container { background-color: #add8e687; } */
    /* celeste */

    #stationsWrap.view-list>.col-lg-4 {
        flex: 0 0 auto;
        width: 33%;
    }

}


/* Medianas (≥992px y <1200px) – Bootstrap lg */
@media (max-width: 991.98px) {
    /*.container { background-color: #ffc0cb96; } */
    /*rosa*/

    /*modal*/
    .modal-alerta-media {
        max-height: 520px;
    }

    #stationsWrap.view-list>.col-lg-4 {
        flex: 0 0 auto;
        width: 50%;
    }

    /*hero*/
    .segmented {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

    .station-toolbar-right {
        justify-content: space-between;
    }
}

/* Tablets (≥768px y <992px) – Bootstrap md */
@media (max-width: 767.98px) {
    /*.container { background-color: #80008033; } */
    /*lila*/

    #stationsWrap.view-list>.col-lg-4 {
        flex: 0 0 auto;
        width: 100%;
    }

}

/* Móviles grandes (≥576px y <768px) – Bootstrap sm */
@media (max-width: 575.98px) {
    /*.container { background-color: #00790094; } */
    /*verde*/

    /*llave MX*/
    /*  .btn.btn-llave img{
    border: 0;
    padding: 0;
    margin: 0;
  }*/

}


/* Móviles medianos (≥480px y <576px) – Personalizado */
@media (max-width: 479.98px) {
    /*.container { background-color: #0000ffa8; } */
    /*morado*/

    /*hero*/
    #hero .btn-vino {
        font-size: .85rem;
    }

    /*cards*/
    .segmented {
        font-size: .80rem;
    }

    /* card hero nueva */
    #hero .analisis-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: 390px;
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 10px;
    }

    #hero .analisis-grid::-webkit-scrollbar {
        width: 4px;
    }

    #hero .analisis-grid::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, .25);
        border-radius: 999px;
    }

    #hero .analisis-grid::-webkit-scrollbar-track {
        background: transparent;
    }

    #hero .analisis-item {
        border: 0 !important;
        min-height: 125px;
        padding: 8px;
    }

    #hero .analisis-item:nth-child(odd) {
        border-right: 1px solid rgba(255, 255, 255, .15) !important;
    }

    #hero .analisis-item:nth-child(n+3) {
        border-top: 1px solid rgba(255, 255, 255, .15) !important;
    }

    #hero .analisis-item:last-child {
        grid-column: 1 / -1;
        border-right: 0 !important;
    }

    #hero .analisis-label {
        font-size: 11px;
    }

    #hero .analisis-desc {
        font-size: 10px;
    }

    /*flechas flip*/
    #hero .clima-flip-swiper .swiper-button-next {
        right: -20px;
    }

    #hero .clima-flip-swiper .swiper-button-prev {
        left: -20px;
    }

}


/* Móviles pequeños (<480px) – Personalizado */
@media (max-width: 379.98px) {
    /*.container { background-color: #ff7f506e; }*/
    /*naranja*/

    /*menu liston + llave*/
    .tabs-sticky-nav .nav-link {
        font-size: clamp(0.65rem, 1vw, 1rem);
        padding: 6px 1px;
    }

    body.is-sticky #tabs-sticky .tabs-sticky-nav .nav-link {
        padding: 6px 0px;
    }

    /*hero*/
    #hero .btn-vino {
        font-size: .75rem;
    }

    /*cards*/
    .segmented {
        font-size: .70rem;
    }

    /*car hero*/
    #hero .clima-icon img {
        max-height: 85px;
    }

    /* card hero nueva */
    #hero .analisis-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: 390px;
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 10px;
    }

    #hero .analisis-grid::-webkit-scrollbar {
        width: 4px;
    }

    #hero .analisis-grid::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, .25);
        border-radius: 999px;
    }

    #hero .analisis-grid::-webkit-scrollbar-track {
        background: transparent;
    }

    #hero .analisis-item {
        border: 0 !important;
        min-height: 125px;
        padding: 8px;
    }

    #hero .analisis-item:nth-child(odd) {
        border-right: 1px solid rgba(255, 255, 255, .15) !important;
    }

    #hero .analisis-item:nth-child(n+3) {
        border-top: 1px solid rgba(255, 255, 255, .15) !important;
    }

    #hero .analisis-item:last-child {
        grid-column: 1 / -1;
        border-right: 0 !important;
    }

    #hero .analisis-label {
        font-size: 11px;
    }

    #hero .analisis-desc {
        font-size: 10px;
    }

    /*flechas flip*/
    #hero .clima-flip-swiper .swiper-button-next {
        right: -20px;
    }

    #hero .clima-flip-swiper .swiper-button-prev {
        left: -20px;
    }
}

/* --- RESTORED FROM ESTILOS.CSS --- */

.bg-amarillo i.fa-circle,
.bg-rojo i.fa-circle {
    font-size: 8px;
}

.deg-global-indicador-cards {
    font-size: 0.65em !important;
    vertical-align: top !important;
    margin-left: 2px !important;
    line-height: normal !important;
    display: inline-block !important;
}

.bg-rojo {
    border: 1px solid rgba(220, 53, 69, 0.30);
    background: #dc3545;
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.10);
}

.bg-rojo:hover {
    background: #DC3545;
}

.metric-pill .deg,
.metric-pill .temp-deg,
.kpi-sub .deg {
    font-size: 0.6em !important;
    position: relative !important;
    top: -2px !important;
    font-weight: 700 !important;
    margin-left: 2px !important;
}

.stations-wrap.view-list .station-card,
.stations-wrap.view-list {
    height: auto !important;
    min-height: unset !important;
}

.ms-lg--3 {
    margin-left: .5rem !important;
}

.bg-rojo i.fa-circle {
    font-size: 8px;
}

.temp-hero-main {
    font-size: 0.45em !important;
    vertical-align: top !important;
    margin-left: 2px !important;
    line-height: 1 !important;
    display: inline-block !important;
    font-weight: 700;
    margin-top: 20px !important;
    align-self: flex-start;
}

.stations-wrap.view-list .station-item,
.stations-wrap.view-list .station-card,
.stations-wrap.view-list {
    height: auto !important;
    min-height: unset !important;
}

.stations-wrap.view-list {
    height: auto !important;
    min-height: unset !important;
}

.metric-pill .temp-deg,
.kpi-sub .deg {
    font-size: 0.6em !important;
    position: relative !important;
    top: -2px !important;
    font-weight: 700 !important;
    margin-left: 2px !important;
}

.bg-amarillo {
    border: 1px solid rgba(255, 193, 7, 0.30);
    background: #FFC107;
    color: #FFF !important;
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.10);
}

.bg-amarillo:hover {
    background: #FFC107;
}

.kpi-sub .deg {
    font-size: 0.6em !important;
    position: relative !important;
    top: -2px !important;
    font-weight: 700 !important;
    margin-left: 2px !important;
}

a#hero-status-badge {
    text-decoration: none;
    cursor: default;
}