@import"https://fonts.googleapis.com/css2?family=Modak&family=Quicksand:wght@300;400;500;600;700&display=swap";:root{--bg-cream: #FDF6EC;--bg-sand: #F5E6D3;--bg-card: #FFD6E0;--bg-card-alt: #E8D5F5;--bg-card-hover: #FFBFD0;--navy: #2B3674;--navy-light: #3B4A8A;--primary: #6BA3D6;--primary-hover: #5A8FC0;--accent: #F4A261;--accent-hover: #E8923F;--green-pastel: #7EC8A0;--lilac: #C4B1D4;--lilac-light: #E8D5F5;--text-main: #2B3674;--text-muted: #6B7A99;--text-light: #94A3B8;--border-color: rgba(43, 54, 116, .12);--shadow-soft: 0 4px 20px rgba(43, 54, 116, .08);--max-w: 600px;--bottom-nav-height: 70px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Quicksand,sans-serif;background-color:var(--bg-cream);color:var(--text-main);line-height:1.6;-webkit-font-smoothing:antialiased;padding-bottom:var(--bottom-nav-height)}h1,h2,h3,h4{font-family:Modak,cursive;font-weight:400;color:var(--navy)}a{color:var(--navy);text-decoration:none;transition:all .2s ease}a:hover{color:var(--primary)}button{font-family:Quicksand,sans-serif;cursor:pointer;border:none;outline:none;transition:all .3s cubic-bezier(.4,0,.2,1)}input,textarea,select{font-family:Quicksand,sans-serif;background:#fff;border:1.5px solid var(--border-color);color:var(--text-main);padding:12px 16px;border-radius:12px;outline:none;transition:border-color .2s,box-shadow .2s;width:100%}input:focus,textarea:focus,select:focus{border-color:var(--primary);box-shadow:0 0 0 3px #6ba3d633}.glass-panel{background:#fff;border:1.5px solid var(--border-color);border-radius:16px;padding:20px;box-shadow:var(--shadow-soft);transition:transform .3s ease,box-shadow .3s ease}.glass-panel:hover{box-shadow:0 6px 24px #2b36741f}.card-pink{background:var(--bg-card);border:none;border-radius:16px;padding:20px;box-shadow:var(--shadow-soft)}.card-lilac{background:var(--lilac-light);border:none;border-radius:16px;padding:20px;box-shadow:var(--shadow-soft)}.app-container{max-width:var(--max-w);margin:0 auto;min-height:100vh;position:relative;display:flex;flex-direction:column}.page-content{flex:1;padding:24px 20px 40px;animation:fadeIn .4s ease forwards}.text-gradient{color:var(--navy)}.text-sm{font-size:.875rem}.text-xs{font-size:.75rem}.text-muted{color:var(--text-muted)}.font-semibold{font-weight:600}.font-bold{font-weight:700}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.gap-6{gap:24px}.mt-2{margin-top:8px}.mt-4{margin-top:16px}.mt-6{margin-top:24px}.mb-2{margin-bottom:8px}.mb-4{margin-bottom:16px}.w-full{width:100%}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 28px;border-radius:999px;font-size:1rem;font-family:Quicksand,sans-serif;font-weight:700;letter-spacing:.5px;transition:all .3s ease}.btn-primary{background:var(--navy);color:#fff;box-shadow:0 4px 12px #2b36744d}.btn-primary:hover{background:var(--navy-light);transform:translateY(-1px);box-shadow:0 6px 16px #2b367459}.btn-primary:active{transform:scale(.97)}.btn-accent{background:var(--accent);color:#fff;box-shadow:0 4px 12px #f4a2614d}.btn-secondary{background:#2b367414;color:var(--navy);border:1.5px solid var(--border-color)}.btn-secondary:hover{background:#2b36741f}.btn-ghost{background:transparent;color:var(--navy);padding:8px 16px}.btn-ghost:hover{background:#2b36740f;border-radius:8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse-subtle{0%,to{opacity:1}50%{opacity:.7}}.animate-pulse{animation:pulse-subtle 2s cubic-bezier(.4,0,.6,1) infinite}.bottom-nav{position:fixed;bottom:0;left:50%;transform:translate(-50%);width:100%;max-width:var(--max-w);height:var(--bottom-nav-height);background:var(--bg-cream);border-top:1.5px solid var(--border-color);display:flex;justify-content:space-around;align-items:center;padding:0 10px;z-index:50;padding-bottom:env(safe-area-inset-bottom)}.nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--text-light);width:60px;height:100%;transition:all .2s ease}.nav-item.active{color:var(--navy)}.nav-item.active svg{stroke-width:2.5px}.nav-label{font-size:.65rem;font-weight:600}.badge{padding:4px 10px;border-radius:99px;font-size:.75rem;font-weight:700;display:inline-flex;align-items:center;gap:4px}.badge-good{background:#7ec8a040;color:#2d8a5e;border:1px solid rgba(126,200,160,.4)}.badge-fair{background:#f4a26133;color:#c07830;border:1px solid rgba(244,162,97,.35)}.badge-poor{background:#ef444426;color:#d63333;border:1px solid rgba(239,68,68,.25)}.app-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;position:sticky;top:0;background:var(--bg-cream);z-index:40;border-bottom:1.5px solid var(--border-color)}.logo-container{display:flex;align-items:center;gap:8px}.logo-text{font-family:Modak,cursive;font-size:1.5rem;font-weight:400;color:var(--navy)}.forecast-header{text-align:center;padding:20px 0 10px}.forecast-header h1{font-size:2rem;color:var(--navy);margin-bottom:4px}.forecast-header .subtitle{color:var(--text-muted);font-size:1rem}.select-beach{background:#fff;border:1.5px solid var(--border-color);border-radius:12px;padding:12px 40px 12px 16px;font-size:1rem;color:var(--text-main);width:100%;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232B3674' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}.date-nav{display:flex;align-items:center;justify-content:center;gap:16px;padding:12px 0}.date-nav .date-text{font-family:Quicksand,sans-serif;font-weight:700;font-size:1.4rem;color:var(--navy)}.date-nav button{background:none;color:var(--navy);font-size:1.2rem;padding:4px 8px;border-radius:8px}.date-nav button:hover{background:#2b36740f}.period-tabs{display:flex;background:var(--lilac-light);border-radius:999px;padding:4px;margin:12px 0 20px}.period-tab{flex:1;padding:10px;text-align:center;font-weight:700;font-size:.95rem;border-radius:999px;color:var(--text-muted);transition:all .3s ease;cursor:pointer}.period-tab.active{background:var(--lilac);color:#fff}.forecast-condition{font-family:Modak,cursive;font-size:2rem;color:var(--navy);line-height:1.2;margin-bottom:20px}.forecast-data-row{padding:12px 0;border-bottom:1px solid rgba(43,54,116,.06)}.forecast-data-row:last-child{border-bottom:none}.forecast-data-label{font-size:.85rem;color:var(--text-muted);margin-bottom:2px}.forecast-data-value{font-family:Quicksand,sans-serif;font-weight:700;font-size:1.25rem;color:var(--navy)}.tide-section{margin-top:24px;padding:20px;background:var(--bg-sand);border-radius:16px}.tide-title{font-family:Quicksand,sans-serif;font-weight:700;font-size:1.1rem;color:var(--navy);margin-bottom:16px}.tide-chart{display:flex;justify-content:space-between;align-items:flex-end;padding:20px 0;position:relative}.tide-point{display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;z-index:1}.tide-dot{width:12px;height:12px;background:var(--navy);border-radius:50%}.tide-time{font-family:Quicksand,sans-serif;font-weight:700;font-size:.9rem;color:var(--navy)}.tide-height{font-size:.75rem;color:var(--text-muted)}.week-card{background:var(--bg-card);border-radius:16px;padding:20px;margin-bottom:16px}.week-card-title{font-family:Quicksand,sans-serif;font-weight:700;font-size:1.3rem;color:var(--navy);margin-bottom:12px;padding-bottom:8px;border-bottom:2px solid rgba(43,54,116,.1)}.week-period{margin-bottom:12px}.week-period-label{font-size:.8rem;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}.week-condition{font-size:1rem;font-weight:600;color:var(--text-main)}.week-details{font-size:.9rem;color:var(--text-muted)}.week-recommendation{font-size:.85rem;color:var(--text-muted);margin-top:8px;padding-top:8px;border-top:1px solid rgba(43,54,116,.08);font-style:italic}.landing-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center;height:calc(100vh - 60px - var(--bottom-nav-height));max-width:var(--max-w);margin:0 auto;text-align:center;padding:40px 20px;background-color:#fdf6ec;background-image:url(/images/capa.png);background-size:contain;background-position:center;background-repeat:no-repeat;position:relative;overflow:hidden}.landing-title{font-family:Modak,cursive;font-size:3rem;color:var(--navy);line-height:1.1;margin-bottom:4px}.landing-subtitle{font-size:1.1rem;color:var(--text-muted);margin-bottom:40px}.friendly-tip{background:var(--bg-sand);border-radius:12px;padding:16px;font-size:.9rem;color:var(--text-muted);line-height:1.5;margin-top:20px}@media(max-width:480px){.page-content{padding:16px 12px 30px}.app-header{padding:10px 12px}.logo-text{font-size:1.2rem}.period-tabs{font-size:.85rem}.forecast-header h1{font-size:1.6rem}.forecast-condition{font-size:1.5rem}.forecast-data-label{font-size:.8rem}.forecast-data-value{font-size:1rem}.select-beach{font-size:.9rem;padding:10px 14px}.btn{font-size:.9rem;padding:12px 20px}.landing-title{font-size:2rem}.landing-subtitle{font-size:.9rem}.tide-chart{gap:8px}.tide-time{font-size:.75rem}.tide-height{font-size:.7rem}.week-card{padding:14px}.week-card-title{font-size:1.1rem}.week-condition{font-size:.85rem}.week-details{font-size:.75rem}.bottom-nav{padding:6px 0 env(safe-area-inset-bottom,6px)}.nav-item span{font-size:.6rem}}@media(max-width:360px){.forecast-header h1,.forecast-condition{font-size:1.3rem}.logo-text{font-size:1rem}.landing-title{font-size:1.6rem}}@supports (padding-bottom: env(safe-area-inset-bottom)){.bottom-nav{padding-bottom:calc(6px + env(safe-area-inset-bottom))}.app-container{padding-bottom:env(safe-area-inset-bottom)}}.forecast-data-value,.week-details,.week-condition{word-break:break-word;overflow-wrap:break-word}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{overscroll-behavior-y:contain}.btn,.period-tab,.nav-item,select{min-height:44px}