/* =====================================================
   HOME.CSS · HOME PREMIUM V4
   Fondo difuminado · tarjetas claras · orden editorial
===================================================== */

/* FONDO MÁS SUAVE */
.hero{
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 0 34px 34px !important;
  min-height: auto !important;
  padding: 30px 34px 30px !important;
}

.hero-bg-image{
  opacity: 1 !important;
  filter: blur(3px) saturate(.95) contrast(.92) brightness(1.15) !important;
  transform: scale(1.035);
}

.hero-overlay{
  background:
    linear-gradient(90deg, rgba(255,250,238,.96), rgba(255,250,238,.82) 44%, rgba(255,250,238,.48)),
    linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.08)) !important;
}

body{
  background:
    linear-gradient(180deg,rgba(255,250,238,.58),rgba(255,250,238,.46)),
    url("../assets/bg/hero-viaje.jpg") center top / cover no-repeat fixed !important;
}

/* HERO TEXTO */
.hero-top{
  align-items:flex-start !important;
  margin-bottom:24px !important;
}

.hero h1,
.hero .eyebrow,
.hero .subtitle{
  color: var(--ink) !important;
  text-shadow: none !important;
}

.hero h1{
  font-size: clamp(3.05rem, 5.6vw, 5rem) !important;
  line-height: .9 !important;
  letter-spacing: -.045em !important;
  margin-top: 8px !important;
}

.hero .eyebrow{
  color: var(--ocean) !important;
  font-weight: 900 !important;
}

.hero .subtitle{
  color: #3d5962 !important;
}

/* BOTÓN INSTALAR */
.install-btn{
  background: rgba(255,255,255,.94) !important;
  color: var(--ink) !important;
  border: 1px solid rgba(22,55,69,.18) !important;
  box-shadow: 0 10px 24px rgba(22,55,69,.12) !important;
}

/* TARJETAS HERO */
.dashboard-grid{
  margin-top: 24px !important;
  gap: 16px !important;
}

.dash-card{
  min-height: 108px !important;
  padding: 18px 20px !important;
  background: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(22,55,69,.18) !important;
  box-shadow:
    0 18px 42px rgba(22,55,69,.16),
    inset 0 1px 0 rgba(255,255,255,.8) !important;
  backdrop-filter: blur(8px) !important;
  color: var(--ink) !important;
}

.dash-card p{
  color: #56696f !important;
  font-size: .76rem !important;
}

.dash-card strong{
  color: var(--ink) !important;
  font-size: 1.18rem !important;
}

.dash-card small{
  color: #607177 !important;
}

.sketch-icon{
  font-size: 1.65rem !important;
}

/* RECOMENDACIÓN */
.smart-rec-card{
  min-height: 90px !important;
  padding: 18px 22px !important;
  background: rgba(255,255,255,.90) !important;
  border: 1px solid rgba(22,55,69,.18) !important;
  box-shadow: 0 18px 42px rgba(22,55,69,.16) !important;
  backdrop-filter: blur(8px) !important;
}

.smart-rec-icon{
  background: rgba(15,91,115,.10) !important;
  border: 1px solid rgba(22,55,69,.12) !important;
}

.smart-rec-label,
.smart-rec-content h3,
.smart-rec-content span{
  color: var(--ink) !important;
}

/* HOME HEADER */
#view-home .section-title{
  align-items: center !important;
  margin-bottom: 20px !important;
}

#view-home .section-title > span{
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(22,55,69,.16) !important;
  box-shadow: 0 12px 28px rgba(22,55,69,.12) !important;
}

#view-home .section-title h2{
  font-size: clamp(2.3rem, 4.3vw, 3.5rem) !important;
  line-height: .92 !important;
  color: var(--ink) !important;
}

#view-home .section-title p{
  color: #4e636b !important;
}

/* TARJETA PRINCIPAL */
.today-card{
  min-height: 140px !important;
  padding: 26px 30px !important;
  background: rgba(255,255,255,.90) !important;
  border: 1px solid rgba(22,55,69,.18) !important;
  box-shadow: 0 18px 42px rgba(22,55,69,.15) !important;
  backdrop-filter: blur(8px) !important;
}

.today-card .label{
  color: #756038 !important;
}

.today-card h3{
  font-size: 1.55rem !important;
  line-height: 1.08 !important;
  color: var(--ink) !important;
}

.today-card p{
  color: #3f555d !important;
}

.big-doodle{
  opacity: .05 !important;
}

/* TARJETAS RÁPIDAS */
.quick-actions{
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 18px !important;
  margin: 22px 0 !important;
}

.home-smart-card{
  min-height: 120px !important;
  padding: 20px !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(22,55,69,.18) !important;
  box-shadow: 0 16px 36px rgba(22,55,69,.13) !important;
  backdrop-filter: blur(8px) !important;
}

.home-smart-card::before{
  width: 7px !important;
  background: linear-gradient(180deg, var(--ocean), var(--gold)) !important;
}

.home-smart-card strong{
  font-size: .82rem !important;
  color: var(--ocean) !important;
}

.home-smart-card span{
  font-size: 1.16rem !important;
  color: var(--ink) !important;
}

.home-smart-card small{
  color: #596b71 !important;
}

/* ESTADO DEL DÍA */
.weather-panel{
  min-height: 128px !important;
  padding: 24px 30px !important;
  background: rgba(255,255,255,.90) !important;
  border: 1px solid rgba(22,55,69,.18) !important;
  box-shadow: 0 18px 42px rgba(22,55,69,.14) !important;
  backdrop-filter: blur(8px) !important;
}

.weather-panel h3{
  font-size: 1.38rem !important;
  color: var(--ink) !important;
}

.weather-panel p{
  color: #40565e !important;
}

.weather-actions button{
  min-height: 42px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.86) !important;
  color: var(--ink) !important;
  border: 1px solid rgba(22,55,69,.18) !important;
  box-shadow: 0 8px 18px rgba(22,55,69,.08) !important;
}

/* NAV */
.bottom-nav{
  background: rgba(255,246,226,.96) !important;
  border: 1px solid rgba(22,55,69,.16) !important;
}

.bottom-nav button.active{
  background: linear-gradient(135deg, var(--ink), var(--ocean)) !important;
  color: var(--paper) !important;
}

/* TABLET */
@media(max-width: 900px){
  .hero{
    padding: 26px 24px 24px !important;
  }

  .dashboard-grid,
  .quick-actions{
    grid-template-columns: repeat(4, 1fr) !important;
  }

  .dash-card{
    min-height: 100px !important;
    padding: 16px !important;
  }
}

/* MÓVIL */
@media(max-width: 760px){
  .hero{
    padding: 22px 16px 20px !important;
  }

  .hero h1{
    font-size: 2.45rem !important;
  }

  .dashboard-grid,
  .quick-actions{
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .today-card,
  .weather-panel{
    min-height: auto !important;
    padding: 22px !important;
  }

  .home-smart-card{
    min-height: 104px !important;
  }
}
/* =====================================================
   HOME V5 · TIPOGRAFÍA, ALINEACIÓN Y JERARQUÍA
===================================================== */

/* HERO centrado y proporcionado */
.hero-top{
  display:grid !important;
  grid-template-columns:1fr auto !important;
  align-items:start !important;
}

.hero h1{
  max-width:100% !important;
  text-align:left !important;
  font-size:clamp(3rem,5.2vw,4.8rem) !important;
  line-height:.9 !important;
  margin:8px 0 6px !important;
  color:#123949 !important;
}

.hero .eyebrow{
  font-size:.82rem !important;
  letter-spacing:.16em !important;
  color:#0f5b73 !important;
}

.hero .subtitle{
  font-family:var(--font-hand) !important;
  font-size:1.22rem !important;
  color:#34545f !important;
  line-height:1.05 !important;
}

#heroPeople{
  font-size:.95rem !important;
  color:#4d6870 !important;
  opacity:.9 !important;
}

/* Cards superiores: icono + texto alineado */
.dash-card{
  display:grid !important;
  grid-template-columns:46px 1fr !important;
  grid-template-rows:auto auto !important;
  column-gap:12px !important;
  align-items:center !important;
}

.dash-card .sketch-icon{
  grid-row:1 / 3 !important;
  width:46px !important;
  height:46px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:16px !important;
  background:rgba(15,91,115,.08) !important;
  font-size:1.45rem !important;
}

.dash-card p{
  margin:0 !important;
  font-size:.76rem !important;
  font-weight:900 !important;
  letter-spacing:.02em !important;
  color:#587079 !important;
}

.dash-card strong{
  margin:0 !important;
  font-size:1.12rem !important;
  line-height:1.05 !important;
  color:#123949 !important;
}

.dash-card small{
  grid-column:2 !important;
  margin-top:2px !important;
  font-size:.76rem !important;
}

/* Recomendación */
.smart-rec-card{
  display:grid !important;
  grid-template-columns:58px 1fr auto !important;
  align-items:center !important;
}

.smart-rec-label{
  font-size:.76rem !important;
  letter-spacing:.15em !important;
  color:#587079 !important;
}

.smart-rec-content h3{
  font-size:1.22rem !important;
  line-height:1.05 !important;
  color:#123949 !important;
}

.smart-rec-content span{
  font-size:.92rem !important;
  color:#4b626a !important;
}

/* Título resumen */
#view-home .section-title{
  display:grid !important;
  grid-template-columns:62px 1fr !important;
  align-items:center !important;
  gap:16px !important;
}

#view-home .section-title > span{
  width:58px !important;
  height:58px !important;
  border-radius:18px !important;
}

#view-home .section-title h2{
  font-size:clamp(2.2rem,4vw,3.25rem) !important;
  line-height:.92 !important;
  letter-spacing:-.035em !important;
  color:#123949 !important;
}

#view-home .section-title p{
  font-size:.98rem !important;
  color:#526871 !important;
}

/* Próximo plan */
.today-card{
  display:flex !important;
  align-items:flex-start !important;
}

.today-card .label,
.weather-panel .label{
  font-size:.76rem !important;
  letter-spacing:.16em !important;
  color:#7a5d2e !important;
}

.today-card h3{
  font-size:1.52rem !important;
  line-height:1.05 !important;
  color:#123949 !important;
}

.today-card p{
  font-size:1rem !important;
  color:#445c65 !important;
}

/* Tarjetas rápidas con orden */
.home-smart-card{
  justify-content:flex-start !important;
  gap:8px !important;
}

.home-smart-card strong{
  font-size:.78rem !important;
  letter-spacing:.02em !important;
}

.home-smart-card span{
  font-size:1.18rem !important;
  line-height:1.08 !important;
  color:#123949 !important;
}

.home-smart-card small{
  font-size:.78rem !important;
  line-height:1.22 !important;
}

/* Estado del día */
.weather-panel{
  display:grid !important;
  grid-template-columns:1fr auto !important;
  gap:20px !important;
  align-items:center !important;
}

.weather-panel h3{
  font-size:1.38rem !important;
  line-height:1.08 !important;
  color:#123949 !important;
}

.weather-panel p{
  font-size:1rem !important;
  color:#445c65 !important;
}

.weather-actions{
  justify-content:flex-end !important;
  margin-top:0 !important;
}

.weather-actions button{
  font-size:.88rem !important;
  font-weight:900 !important;
}

/* Móvil/tablet */
@media(max-width:760px){

  .hero-top{
    grid-template-columns:1fr !important;
  }

  .hero h1{
    font-size:2.35rem !important;
  }

  .dash-card{
    grid-template-columns:42px 1fr !important;
  }

  .dash-card .sketch-icon{
    width:42px !important;
    height:42px !important;
  }

  .smart-rec-card{
    grid-template-columns:52px 1fr !important;
  }

  .weather-panel{
    grid-template-columns:1fr !important;
  }

  .weather-actions{
    justify-content:flex-start !important;
  }

  #view-home .section-title{
    grid-template-columns:52px 1fr !important;
  }

  #view-home .section-title h2{
    font-size:2rem !important;
  }
}
/* HOME V6 · TIPOGRAFÍA MANUSCRITA + TÍTULO CENTRADO */

.hero-top{
  display:block !important;
  text-align:center !important;
  margin-bottom:26px !important;
}

.install-btn{
  position:absolute !important;
  top:34px !important;
  right:34px !important;
}

.hero h1{
  text-align:center !important;
  font-family:"Playfair Display", Georgia, serif !important;
  font-size:clamp(3.4rem,6vw,5.4rem) !important;
  line-height:.88 !important;
  letter-spacing:-.055em !important;
  margin:10px auto 8px !important;
  color:#123949 !important;
}

.hero .eyebrow{
  text-align:center !important;
  font-family:"Inter", system-ui, sans-serif !important;
  font-size:.82rem !important;
  letter-spacing:.18em !important;
}

.hero .subtitle,
#heroPeople{
  display:block !important;
  text-align:center !important;
  font-family:"Caveat", cursive !important;
  font-size:1.35rem !important;
  line-height:1.05 !important;
  color:#2d5564 !important;
  opacity:1 !important;
  margin:2px auto 0 !important;
  white-space:normal !important;
}

#heroPeople{
  font-size:1.15rem !important;
  color:#496a73 !important;
}

/* Interior tipo comic / manuscrito suave */
.dash-card p,
.dash-card small,
.smart-rec-label,
.home-smart-card strong,
.home-smart-card small,
.weather-panel p,
.today-card p{
  font-family:"Inter", system-ui, sans-serif !important;
}

.dash-card strong,
.home-smart-card span,
.weather-panel h3,
.today-card h3,
.smart-rec-content h3{
  font-family:"Caveat", cursive !important;
  font-weight:700 !important;
  letter-spacing:.01em !important;
}

.dash-card strong{
  font-size:1.55rem !important;
}

.home-smart-card span{
  font-size:1.65rem !important;
}

.today-card h3{
  font-size:2rem !important;
}

.weather-panel h3{
  font-size:1.85rem !important;
}

.smart-rec-content h3{
  font-size:1.7rem !important;
}

/* Mejor alineación de cards */
.dash-card{
  grid-template-columns:48px 1fr !important;
  text-align:left !important;
}

.smart-rec-card{
  text-align:left !important;
}

.home-smart-card{
  text-align:left !important;
}

/* Mobile/tablet */
@media(max-width:760px){
  .install-btn{
    display:none !important;
  }

  .hero h1{
    font-size:2.65rem !important;
  }

  .hero .subtitle{
    font-size:1.18rem !important;
  }

  #heroPeople{
    font-size:1rem !important;
  }
}
/* ========= TEXTURA PREMIUM ========= */

.dash-card,
.today-card,
.weather-panel,
.smart-rec-card,
.home-smart-card{
    position:relative;
    overflow:hidden;
}

.dash-card::before,
.today-card::before,
.weather-panel::before,
.smart-rec-card::before,
.home-smart-card::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

        radial-gradient(circle at 15% 20%,rgba(255,232,185,.18),transparent 30%),

        radial-gradient(circle at 82% 18%,rgba(182,219,233,.12),transparent 28%),

        radial-gradient(circle at 65% 80%,rgba(255,241,214,.12),transparent 30%);

    mix-blend-mode:multiply;

    opacity:.9;
}
.dash-card::after{

    content:"";

    position:absolute;

    left:18px;

    right:18px;

    top:0;

    height:4px;

    border-radius:20px;

    background:linear-gradient(90deg,
    #0f566d,
    #4f9ab6,
    #f3d18b);
}
.dash-card,
.today-card,
.weather-panel,
.smart-rec-card{

box-shadow:

0 10px 28px rgba(30,60,80,.08),

0 2px 8px rgba(0,0,0,.05);

}
.dash-card{

transition:

transform .28s,

box-shadow .28s;

}

.dash-card:hover{

transform:translateY(-5px);

box-shadow:

0 18px 42px rgba(0,0,0,.14);

}
.dash-card-icon{

width:62px;

height:62px;

border-radius:18px;

background:

linear-gradient(180deg,#ffffff,#edf5f8);

box-shadow:

0 6px 16px rgba(0,0,0,.08);

font-size:30px;
}
.dash-card h4,
.today-card h4,
.weather-panel h4{

font-size:.82rem;

letter-spacing:.14em;

text-transform:uppercase;

font-weight:700;

color:#4b6672;

}
.dash-card strong{

font-size:2rem;

font-weight:800;

color:#173b4b;

}
.weather-chip{

background:

linear-gradient(180deg,

#fffdfa,

#f5f8fb);

border:1px solid rgba(40,80,90,.08);

box-shadow:

0 3px 10px rgba(0,0,0,.05);

padding:12px 18px;

font-weight:700;
}
.smart-rec-card{

padding:26px 30px;

min-height:125px;
}

.smart-rec-content h3{

margin-top:6px;

margin-bottom:4px;
}
/* HOME · FOOTER FINAL + NAV FLOTANTE */

.mesa-footer{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;

  width:max-content;
  max-width:calc(100% - 40px);

  margin:28px auto 86px;
  padding:8px 18px;

  border-radius:999px;
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);

  border:1px solid rgba(255,255,255,.78);
  box-shadow:0 8px 22px rgba(22,55,69,.10);

  font-family:"Inter",sans-serif;
  font-size:12px;
  color:#5c707a;
}

.mesa-footer span{
  opacity:.8;
  letter-spacing:.08em;
}

.mesa-footer strong{
  color:#15475b;
  font-weight:800;
  letter-spacing:.22em;
}

/* barra inferior más flotante */
.bottom-nav{
  bottom:14px !important;
  box-shadow:
    0 18px 42px rgba(22,55,69,.22),
    0 4px 12px rgba(22,55,69,.10) !important;
}
/* HOME · AJUSTE FINAL TITULARES + FOOTER LIMPIO */

/* Títulos más acordes, menos pesados */
.hero h1,
#view-home .section-title h2{
  font-family:"Caveat",cursive !important;
}

.hero h1{
  font-size:clamp(3.1rem,5.4vw,5rem) !important;
}

#view-home .section-title h2{
  font-size:clamp(2.25rem,4.1vw,3.35rem) !important;
}

/* Footer sin recuadro, como firma limpia */
.mesa-footer{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;

  padding:0 !important;
  margin:32px auto 86px !important;

  color:#48646e !important;
  opacity:.62 !important;
}

.mesa-footer span{
  font-size:11px !important;
}

.mesa-footer strong{
  font-size:12px !important;
  color:#153f50 !important;
}
.home-stat .icon,
.home-reco .icon{
    background:linear-gradient(135deg,#fff9ec,#f2f8fb);
    border:1px solid rgba(25,74,96,.10);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        0 8px 18px rgba(27,54,73,.10);
}
.home-card::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;

    background:
      radial-gradient(circle at 20% 25%,rgba(255,214,140,.08),transparent 45%),
      radial-gradient(circle at 82% 72%,rgba(119,176,198,.08),transparent 42%);

    mix-blend-mode:multiply;
    opacity:.7;
}
.home-card,
.home-reco{
    transition:
        transform .28s ease,
        box-shadow .28s ease;
}

.home-card:hover,
.home-reco:hover{
    transform:translateY(-4px);
    box-shadow:
        0 18px 40px rgba(22,58,78,.18);
}
.bottom-nav .icon{
    margin-bottom:5px;
    transform:scale(1.08);
}
/* =====================================================
   HOME · CIERRE VISUAL FINAL
===================================================== */

body .hero{
  padding-top:22px !important;
  padding-bottom:22px !important;
  min-height:auto !important;
}

body .hero h1{
  font-size:clamp(3.45rem,6vw,5.45rem) !important;
  line-height:.84 !important;
  margin-top:8px !important;
  margin-bottom:4px !important;
}

body .dashboard-grid{
  margin-top:18px !important;
  gap:14px !important;
}

body .dash-card{
  min-height:94px !important;
  padding:15px 16px !important;
}

body .smart-rec-card{
  min-height:82px !important;
  padding:15px 18px !important;
}

body #view-home{
  padding-bottom:130px !important;
}

body #view-home .section-title{
  margin-top:18px !important;
  margin-bottom:16px !important;
}

body #view-home .section-title h2{
  font-size:clamp(2.75rem,4.6vw,4rem) !important;
}

body .today-card{
  min-height:118px !important;
  padding:22px 26px !important;
}

body .quick-actions{
  gap:14px !important;
  margin:18px 0 !important;
}

body .home-smart-card{
  min-height:104px !important;
  padding:17px 18px !important;
}

body .weather-panel{
  min-height:112px !important;
  padding:20px 26px !important;
}

body .weather-actions{
  gap:10px !important;
}

/* Tablet */
@media(max-width:900px){
  body .hero{
    padding:18px 18px 20px !important;
  }

  body .dashboard-grid,
  body .quick-actions{
    grid-template-columns:repeat(4,1fr) !important;
  }

  body .dash-card{
    min-height:88px !important;
  }
}

/* Móvil */
@media(max-width:760px){
  body .hero h1{
    font-size:3rem !important;
  }

  body .dashboard-grid,
  body .quick-actions{
    grid-template-columns:repeat(2,1fr) !important;
  }

  body .weather-panel{
    grid-template-columns:1fr !important;
  }

  body .weather-actions{
    display:grid !important;
    grid-template-columns:repeat(2,1fr) !important;
  }
}
/* ==========================================
   HOME FINAL · HERO
========================================== */

.hero{
    padding-top:18px !important;
    padding-bottom:22px !important;
}

.hero-top{
    margin-bottom:16px !important;
}

.hero h1{
    margin:6px 0 4px !important;
    line-height:.92 !important;
}

.hero .subtitle{
    margin-top:2px !important;
    opacity:.78;
    font-size:1rem;
}

#heroPeople{
    margin-top:-2px;
    font-size:.88rem !important;
    opacity:.62 !important;
}
.dashboard-grid{

    margin-top:18px !important;

    gap:18px !important;

}

.dash-card{

    min-height:96px !important;

    padding:16px 18px !important;

}

.sketch-icon{

    width:54px;

    height:54px;

}

.dash-card strong{

    font-size:1.08rem !important;

}

.dash-card p{

    font-size:.74rem !important;

}
.smart-rec-card{

    min-height:74px !important;

    padding:16px 22px !important;

    align-items:center;

}

.smart-rec-content{

    justify-content:center;

}

.smart-rec-content h3{

    margin-bottom:4px;

}

.smart-rec-content span{

    opacity:.78;

}
#view-home .section-title{

    margin-top:14px !important;

    margin-bottom:18px !important;

}

#view-home .section-title h2{

    letter-spacing:-1px;

}

#view-home .section-title p{

    margin-top:4px;

    opacity:.72;

    font-size:1rem;

}
.today-card{

    min-height:108px !important;

    padding:20px 28px !important;

}

.today-card h3{

    margin:4px 0;

    font-size:1.45rem !important;

}

.today-card p{

    margin-top:2px;

}
.home-smart-card:nth-child(1)::before{

    background:#2d6fa8 !important;

}

.home-smart-card:nth-child(2)::before{

    background:#3c9b65 !important;

}

.home-smart-card:nth-child(3)::before{

    background:#b98b2d !important;

}

.home-smart-card:nth-child(4)::before{

    background:#b96b3d !important;

}
.weather-panel{

    min-height:104px !important;

    padding:20px 28px !important;

}

.weather-actions{

    gap:10px;

}

.weather-actions button{

    min-height:38px !important;

    padding:0 15px !important;

    font-size:.95rem;

    font-weight:600;

}
#view-home section{

    margin-bottom:24px;

}
.home-smart-card,
.today-card,
.weather-panel,
.smart-rec-card,
.dash-card{

    transition:

        transform .22s ease,

        box-shadow .22s ease;

}

.home-smart-card:hover,
.today-card:hover,
.weather-panel:hover,
.smart-rec-card:hover,
.dash-card:hover{

    transform:translateY(-4px);

    box-shadow:

        0 22px 48px rgba(18,55,72,.18);

}
.today-card::before,
.weather-panel::before,
.smart-rec-card::before{

    content:"";

    position:absolute;

    left:22px;

    right:22px;

    top:0;

    height:3px;

    border-radius:20px;

    background:linear-gradient(
        90deg,
        var(--ocean),
        var(--gold)
    );

    opacity:.75;

}