/* =====================================================================
   AZUL CARIBE LOUNGE — MENÚ DIGITAL · Diseño v17 (fondo blanco, estructura
   tipo Fidelio: barra superior, portada en dos columnas, menú en tarjetas,
   nosotros, contacto y carrito lateral).
   Colores: azul noche para textos, azul caribe para precios y botón
   principal, dorado del logo para "Agregar". Títulos en DM Serif Display
   y textos en Fira Sans.
   Las clases e ids son los que usa app.js: si cambias un nombre aquí,
   cámbialo también allá.
   ===================================================================== */
:root{
  --bg:#ffffff;
  --soft:#f3f7fb;          /* fondo suave para secciones */
  --ink:#0b1d33;           /* azul noche: textos */
  --muted:#5b6b80;
  --line:#e3e9f1;
  --caribe:#0a6fa8;        /* azul caribe: precios y botón principal */
  --caribe-dark:#085a88;
  --caribe-soft:rgba(10,111,168,.08);
  --gold:#e0b43c;          /* dorado del logo: Agregar y contador */
  --gold-dark:#c99d27;
  --danger:#c2412d;
  --r:24px;
  --maxw:1152px;
  --display:'DM Serif Display', Georgia, 'Times New Roman', serif;
  --text:'Fira Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --topbar-h:64px;
  color-scheme:light;
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--topbar-h) + 64px);}
body{background:var(--bg); color:var(--ink); font-family:var(--text); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
img,video{display:block; max-width:100%;}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;}
a{color:inherit; text-decoration:none;}
h1,h2,h3{font-family:var(--display); font-weight:400; letter-spacing:0; text-wrap:balance; line-height:1.1;}
:focus-visible{outline:2px solid var(--caribe); outline-offset:3px; border-radius:8px;}

/* ============ BOTONES ============ */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:50px; padding:0 26px; border-radius:999px; font-weight:600; font-size:16px; transition:transform .15s ease, background .2s, border-color .2s;}
.btn:hover{transform:scale(1.03);}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--caribe); color:#fff;}
.btn-primary:hover{background:var(--caribe-dark);}
.btn-gold{background:var(--gold); color:var(--ink);}
.btn-gold:hover{background:var(--gold-dark);}
.btn-outline{border:1px solid var(--line); background:#fff; color:var(--ink);}
.btn-outline:hover{background:var(--soft);}

/* ============ BARRA SUPERIOR ============ */
.topbar{position:sticky; top:0; z-index:50; height:var(--topbar-h); background:#fff; border-bottom:1px solid var(--line);}
.topbar-row{max-width:var(--maxw); height:100%; margin:0 auto; padding:0 16px; display:flex; align-items:center; justify-content:space-between; gap:16px;}
.brand{display:flex; align-items:center; gap:10px; min-width:0;}
.brand-logo{width:38px; height:38px; object-fit:contain; border-radius:10px; background:var(--ink); padding:5px;}
.brand-name{font-family:var(--display); font-size:21px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.brand-name span{color:var(--caribe);}
.topnav{display:none; gap:28px; font-size:15px; font-weight:500; color:var(--muted);}
.topnav a:hover{color:var(--ink);}
.topbar-actions{position:relative; display:flex; align-items:center; gap:8px;}
.lang-btn{display:inline-flex; align-items:center; gap:6px; height:40px; padding:0 12px; border-radius:999px; border:1px solid var(--line); font-weight:600; font-size:14px; color:var(--ink); background:#fff;}
.lang-btn:hover,.lang-btn.active{border-color:var(--caribe); color:var(--caribe);}
.lang-menu{position:absolute; right:0; top:50px; z-index:60; min-width:190px; background:#fff; border:1px solid var(--line); border-radius:18px; padding:6px; box-shadow:0 18px 40px rgba(11,29,51,.14); opacity:0; visibility:hidden; transform:translateY(-6px); transition:all .18s ease;}
.lang-menu.open{opacity:1; visibility:visible; transform:none;}
.lang-option{display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; border-radius:12px; font-size:15px; text-align:left;}
.lang-option .code{font-weight:700; font-size:12px; color:#fff; background:var(--caribe); border-radius:6px; padding:2px 6px;}
.lang-option:not(.active) .code{background:var(--soft); color:var(--muted);}
.lang-option:hover{background:var(--soft);}
.lang-option.active{color:var(--caribe); font-weight:600;}
.cart-btn{position:relative; display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px; border-radius:999px; background:var(--caribe); color:#fff; font-weight:600; font-size:14px; transition:transform .15s ease;}
.cart-btn:hover{transform:scale(1.03);}
.cart-btn:active{transform:scale(.96);}
.cart-count{position:absolute; top:-6px; right:-6px; min-width:21px; height:21px; padding:0 5px; border-radius:999px; display:none; place-items:center; font-size:12px; font-weight:700; background:var(--gold); color:var(--ink); border:2px solid #fff;}
.cart-btn.has-items .cart-count{display:grid;}
.cart-count.pop{animation:badgePop .35s ease;}
@keyframes badgePop{0%{transform:scale(1);}40%{transform:scale(1.35);}100%{transform:scale(1);}}
@media (min-width:760px){.topnav{display:flex;} .brand-name{font-size:23px;}}
@media (max-width:520px){.brand-name{font-size:19px;} .brand-name span{display:none;}}
@media (max-width:340px){.brand-name{display:none;}}

/* ============ PORTADA ============ */
.hero{position:relative; overflow:hidden; background:linear-gradient(135deg, var(--caribe-soft) 0%, #fff 45%, #fff 100%);}
.hero-grid{max-width:var(--maxw); margin:0 auto; padding:48px 16px 56px; display:grid; gap:40px; align-items:center;}
.hero-text{max-width:600px;}
.status{display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--muted); margin-bottom:18px;}
.status .dot{width:8px; height:8px; border-radius:50%; background:#2aa56b; box-shadow:0 0 0 4px rgba(42,165,107,.15);}
.eyebrow{color:var(--caribe); font-size:13px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; margin-bottom:12px;}
.hero-title{font-size:clamp(52px,11vw,92px); line-height:.95;}
.hero-title .t1{display:block; color:var(--caribe);}
.hero-title .t2{display:block; color:var(--ink);}
.hero-tagline{margin-top:18px; font-weight:600; color:var(--ink);}
.hero-lead{margin-top:10px; font-size:18px; color:var(--muted); max-width:52ch;}
.hero-actions{margin-top:28px; display:flex; flex-wrap:wrap; gap:12px;}
.hero-media{justify-self:center; width:100%; max-width:380px;}
.hero-video{width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:28px; border:1px solid var(--line); box-shadow:0 30px 60px rgba(11,29,51,.18); background:var(--ink);}
@media (min-width:1024px){
  .hero-grid{grid-template-columns:1.1fr .9fr; padding:88px 24px 104px;}
  .hero-media{justify-self:end;}
}

/* ============ MENÚ ============ */
.menu{max-width:var(--maxw); margin:0 auto; padding:64px 16px 40px;}
.menu-head h2{font-size:clamp(34px,6vw,46px);}
.menu-head p{margin-top:8px; color:var(--muted);}
.sticky-nav{position:sticky; top:var(--topbar-h); z-index:40; margin:24px -16px 0; padding:10px 16px; background:#fff; border-bottom:1px solid var(--line); box-shadow:0 6px 12px -10px rgba(11,29,51,.25);}
.sticky-nav-row{display:flex; align-items:center; gap:8px;}
.icon-btn{flex:none; width:40px; height:40px; display:grid; place-items:center; border-radius:999px; border:1px solid var(--line); color:var(--muted); background:#fff;}
.icon-btn:hover{color:var(--ink);}
.icon-btn.active{background:var(--ink); border-color:var(--ink); color:#fff;}
.nav-scroll-wrap{position:relative; flex:1; min-width:0;}
.nav-scroll-wrap::before,.nav-scroll-wrap::after{content:""; position:absolute; top:0; bottom:0; width:26px; pointer-events:none; z-index:2; transition:opacity .2s;}
.nav-scroll-wrap::before{left:0; background:linear-gradient(90deg, #fff, rgba(255,255,255,0));}
.nav-scroll-wrap::after{right:0; background:linear-gradient(-90deg, #fff, rgba(255,255,255,0));}
.nav-scroll-wrap.at-start::before,.nav-scroll-wrap.at-end::after{opacity:0;}
nav.catnav{display:flex; gap:8px; overflow-x:auto; scroll-behavior:smooth; scrollbar-width:none; cursor:grab; padding:2px 0;}
nav.catnav::-webkit-scrollbar{display:none;}
nav.catnav:active{cursor:grabbing;}
.catchip{flex:none; height:40px; padding:0 18px; border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--muted); font-size:14.5px; font-weight:600; white-space:nowrap; transition:background .2s, color .2s, border-color .2s;}
.catchip:hover{color:var(--ink); background:var(--soft);}
.catchip.active{background:var(--ink); border-color:var(--ink); color:#fff;}
.search-row{max-height:0; overflow:hidden; transition:max-height .25s ease, padding .25s ease;}
.search-row.open{max-height:80px; padding-top:10px;}
.search-row input{width:100%; height:48px; padding:0 18px; border-radius:999px; border:1px solid var(--line); background:var(--soft); color:var(--ink); font:inherit; font-size:16px; outline:none;}
.search-row input:focus{border-color:var(--caribe); background:#fff;}
.search-row input::placeholder{color:#8a97a8;}
main#menu-section{padding-bottom:40px;}
.section-title{display:flex; align-items:baseline; gap:12px; margin:44px 0 18px;}
.section-title:first-child{margin-top:32px;}
.section-title h2{font-size:clamp(28px,5vw,34px);}
.section-title .count{color:var(--muted); font-size:14px; white-space:nowrap;}
.section-title .line{flex:1; height:1px; background:var(--line); align-self:center;}
.empty-state{text-align:center; color:var(--muted); padding:60px 20px;}

/* Tarjetas: 2 columnas en celular (la carta es larga), 3 en computador */
.grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 14px;}
@media (min-width:760px){.grid{gap:20px;}}
@media (min-width:1024px){.grid{grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px;}}
.card{display:flex; flex-direction:column; overflow:hidden; border-radius:var(--r); border:1px solid var(--line); background:#fff; box-shadow:0 1px 2px rgba(11,29,51,.05); cursor:pointer; transition:box-shadow .25s, transform .15s ease;}
.card:hover{box-shadow:0 14px 34px rgba(11,29,51,.10);}
.card:active{transform:scale(.99);}
.card-img-wrap{position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--soft);}
.card-img-wrap img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.card:hover .card-img-wrap img{transform:scale(1.05);}
.card-qty-badge{position:absolute; right:10px; top:10px; min-width:28px; height:28px; padding:0 8px; border-radius:999px; display:grid; place-items:center; font-size:14px; font-weight:700; background:var(--gold); color:var(--ink);}
.card-body{flex:1; display:flex; flex-direction:column; gap:6px; padding:14px;}
.card-name{font-size:18px;}
.card-badge{font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--caribe);}
.card-desc{font-size:13.5px; color:var(--muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.card-foot{margin-top:auto; padding-top:8px; display:flex; flex-direction:column; align-items:stretch; gap:10px;}
.card-price{font-family:var(--display); font-size:22px; color:var(--caribe); font-variant-numeric:tabular-nums;}
.card-add{display:inline-flex; align-items:center; justify-content:center; gap:6px; height:40px; padding:0 16px; border-radius:999px; background:var(--gold); color:var(--ink); font-size:14.5px; font-weight:600; transition:transform .15s ease, background .2s;}
.card-add:hover{background:var(--gold-dark); transform:scale(1.04);}
.card-add:active{transform:scale(.95);}
@media (min-width:760px){
  .card-body{padding:20px; gap:8px;}
  .card-name{font-size:22px;}
  .card-desc{font-size:14.5px; -webkit-line-clamp:3;}
  .card-foot{flex-direction:row; align-items:center; justify-content:space-between;}
  .card-price{font-size:26px;}
}

/* ============ NOSOTROS ============ */
.about{background:var(--soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.about-grid{max-width:var(--maxw); margin:0 auto; padding:64px 16px; display:grid; gap:36px; align-items:center;}
.about-text h2{font-size:clamp(34px,6vw,46px);}
.about-lead{margin-top:16px; font-size:18px; color:var(--muted);}
.about-list{list-style:none; margin-top:22px; display:grid; gap:10px;}
.about-list li{display:flex; align-items:center; gap:10px; font-weight:500;}
.about-list li::before{content:""; flex:none; width:9px; height:9px; border-radius:50%; background:var(--gold);}
.about-media{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.about-media img{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:22px;}
@media (min-width:1024px){.about-grid{grid-template-columns:1fr 1fr; padding:96px 24px;} .about-media{max-width:460px; justify-self:end;}}

/* ============ CONTACTO ============ */
.contact{max-width:var(--maxw); margin:0 auto; padding:64px 16px;}
.contact h2{font-size:clamp(34px,6vw,46px);}
.contact-grid{margin-top:32px; display:grid; gap:16px; grid-template-columns:1fr;}
@media (min-width:640px){.contact-grid{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1024px){.contact-grid{grid-template-columns:repeat(4,1fr); gap:24px;}}
.contact-card{display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:24px; border-radius:var(--r); border:1px solid var(--line); background:#fff; text-align:left; font:inherit; color:var(--ink); transition:background .2s, border-color .2s;}
.contact-card:hover{background:var(--soft); border-color:#cfd9e6;}
.contact-card svg{color:var(--caribe);}
.contact-card strong{font-weight:600; font-size:17px;}
.contact-card span{font-size:14.5px; color:var(--muted);}

/* Franja de reseñas (Tripadvisor), como la de Google en Fidelio */
.review-banner{margin-top:24px; display:flex; flex-direction:column; align-items:center; gap:16px; padding:28px 24px; border-radius:var(--r); background:var(--gold); color:var(--ink); text-align:center; transition:transform .2s ease;}
.review-actions{display:flex; flex-wrap:wrap; justify-content:center; gap:10px;}
.review-btn{gap:8px; transition:transform .15s ease;}
.review-btn:hover{transform:scale(1.04);}
.review-left{display:flex; flex-direction:column; align-items:center; gap:10px;}
.review-stars{display:flex; gap:2px;}
.review-text{font-family:var(--display); font-size:22px; line-height:1.2;}
.review-btn{display:inline-flex; align-items:center; height:46px; padding:0 24px; border-radius:999px; background:var(--ink); color:#fff; font-weight:600; white-space:nowrap;}
@media (min-width:760px){
  .review-banner{flex-direction:row; justify-content:space-between; text-align:left; padding:28px 32px;}
  .review-left{flex-direction:row; gap:14px;}
  .review-text{font-size:24px;}
}
.info-socials{flex-wrap:wrap;}
.info-social{min-width:120px;}

/* ============ PIE ============ */
footer{max-width:var(--maxw); margin:0 auto; padding:40px 16px 56px; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; border-top:1px solid var(--line);}
footer .foot-logo{width:44px; height:44px; object-fit:contain; border-radius:12px; background:var(--ink); padding:6px;}
footer .foot-name{font-family:var(--display); font-size:22px;}
footer .foot-note{font-size:14px; color:var(--muted);}

/* ============ VENTANAS ============ */
.overlay{position:fixed; inset:0; z-index:80; background:rgba(11,29,51,.45); opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s; backdrop-filter:blur(3px);}
.overlay.open{opacity:1; visibility:visible;}
.close-btn,.pm-close{width:40px; height:40px; display:grid; place-items:center; border-radius:999px; font-size:24px; line-height:1; color:var(--ink); background:#fff; border:1px solid var(--line);}
.close-btn:hover,.pm-close:hover{background:var(--soft);}

.product-modal{position:fixed; z-index:90; left:0; right:0; bottom:0; max-height:92vh; overflow-y:auto; background:#fff; border-radius:28px 28px 0 0; display:flex; flex-direction:column; transform:translateY(105%); transition:transform .32s cubic-bezier(.2,.8,.2,1); box-shadow:0 -10px 40px rgba(11,29,51,.15);}
.product-modal.open{transform:none;}
.pm-close{position:absolute; top:14px; right:14px; z-index:3; box-shadow:0 4px 14px rgba(0,0,0,.15);}
.pm-photo-wrap{position:relative; aspect-ratio:1/1; max-height:52vh; overflow:hidden; flex:none; background:var(--soft);}
.pm-photo{width:100%; height:100%; object-fit:cover;}
.pm-badge{position:absolute; left:16px; bottom:16px; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#fff; background:var(--caribe); border-radius:999px; padding:4px 12px;}
.pm-badge:empty{display:none;}
.pm-body{padding:22px 22px 8px; display:grid; gap:12px;}
.pm-title-row{display:flex; justify-content:space-between; align-items:flex-start; gap:16px;}
.pm-name{font-size:30px;}
.pm-price{font-family:var(--display); font-size:28px; color:var(--caribe); white-space:nowrap;}
.pm-desc{color:var(--muted); font-size:16px;}
.pm-tags{display:flex; flex-wrap:wrap; gap:6px;}
.pm-tags:empty{display:none;}
.pm-tags .tag{font-size:13px; color:var(--caribe); background:var(--caribe-soft); border-radius:999px; padding:3px 10px;}
.price-select{display:flex; flex-wrap:wrap; gap:8px;}
.price-pill{display:flex; flex-direction:column; align-items:flex-start; gap:1px; padding:10px 16px; border-radius:18px; border:1px solid var(--line); background:#fff; text-align:left; transition:border-color .2s, background .2s;}
.price-pill .pp-label{font-size:14px; font-weight:600;}
.price-pill .pp-price{font-size:14px; color:var(--caribe); font-weight:600;}
.price-pill.active{border-color:var(--caribe); background:var(--caribe-soft);}
.pm-footer{position:sticky; bottom:0; display:flex; gap:10px; align-items:center; padding:14px 22px calc(16px + env(safe-area-inset-bottom,0px)); background:#fff; border-top:1px solid var(--line);}
.stepper{display:flex; align-items:center; height:50px; border:1px solid var(--line); border-radius:999px; padding:0 4px;}
.stepper button{width:42px; height:42px; border-radius:999px; font-size:22px;}
.stepper button:hover{background:var(--soft);}
.stepper .qn{min-width:26px; text-align:center; font-weight:700;}
.row-add-btn{flex:1; height:50px; border-radius:999px; background:var(--gold); color:var(--ink); font-size:16px; font-weight:700; transition:background .2s;}
.row-add-btn:hover{background:var(--gold-dark);}
.row-add-btn.added{background:var(--caribe); color:#fff;}
@media (min-width:760px){
  .product-modal{left:50%; right:auto; bottom:auto; top:50%; width:min(540px,92vw); border-radius:28px; transform:translate(-50%,-46%) scale(.97); opacity:0; visibility:hidden; transition:all .25s ease;}
  .product-modal.open{transform:translate(-50%,-50%); opacity:1; visibility:visible;}
  .pm-photo-wrap{aspect-ratio:4/3;}
}

.info-modal{position:fixed; z-index:90; left:50%; top:50%; width:min(460px,92vw); max-height:88vh; overflow-y:auto; background:#fff; border-radius:28px; box-shadow:0 30px 70px rgba(11,29,51,.25); transform:translate(-50%,-46%) scale(.97); opacity:0; visibility:hidden; transition:all .25s ease;}
.info-modal.open{transform:translate(-50%,-50%); opacity:1; visibility:visible;}
.info-modal-head{display:flex; justify-content:space-between; align-items:center; padding:20px 20px 0;}
.info-modal-head h3{font-size:26px;}
.info-modal-body{padding:16px 20px 24px; display:grid; gap:10px;}
.info-logo{width:56px; height:56px; object-fit:contain; border-radius:14px; background:var(--ink); padding:8px;}
.info-name{font-family:var(--display); font-size:26px; margin-bottom:4px;}
.info-row{display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border-radius:16px; background:var(--soft); color:var(--ink); font-size:15px;}
.info-row svg{flex:none; margin-top:2px; color:var(--caribe);}
a.info-row:hover{background:#e8eff7;}
.info-socials{display:flex; gap:10px; margin-top:6px;}
.info-social{flex:1; display:flex; align-items:center; justify-content:center; gap:8px; height:46px; border-radius:999px; border:1px solid var(--line); font-weight:600;}
.info-social:hover{background:var(--soft);}

/* ============ CARRITO ============ */
.drawer{position:fixed; z-index:90; top:0; right:0; bottom:0; width:min(440px,100vw); background:#fff; display:flex; flex-direction:column; box-shadow:-20px 0 50px rgba(11,29,51,.18); transform:translateX(102%); transition:transform .3s cubic-bezier(.2,.8,.2,1);}
.drawer.open{transform:none;}
.drawer-head{display:flex; justify-content:space-between; align-items:center; padding:20px; border-bottom:1px solid var(--line);}
.drawer-head h3{font-size:28px;}
.drawer-items{flex:1; overflow-y:auto; padding:8px 20px;}
.drawer-empty{color:var(--muted); text-align:center; padding:60px 10px;}
.cart-row{display:grid; grid-template-columns:64px 1fr auto; gap:12px; align-items:start; padding:14px 0; border-bottom:1px solid var(--line);}
.cart-row img{width:64px; height:64px; border-radius:16px; object-fit:cover;}
.cart-row .info .name{font-weight:600; line-height:1.25;}
.cart-row .info .unit{color:var(--muted); font-size:13.5px; margin-top:2px;}
.qty-row{display:flex; align-items:center; gap:8px; margin-top:8px;}
.qty-btn{width:32px; height:32px; border-radius:999px; border:1px solid var(--line); font-size:18px;}
.qty-btn:hover{background:var(--soft);}
.qty-num{min-width:20px; text-align:center; font-weight:700;}
.remove-x{margin-left:6px; color:var(--danger); font-size:13.5px;}
.line-total{font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums;}
.drawer-foot{padding:16px 20px calc(18px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--line);}
.drawer-foot > * + *{margin-top:12px;}
.total-row{display:flex; justify-content:space-between; align-items:baseline;}
.total-row span:first-child{color:var(--muted);}
.total-row .amt{font-family:var(--display); font-size:32px; color:var(--ink);}
textarea.note{display:block; width:100%; padding:12px 16px; border-radius:18px; border:1px solid var(--line); background:var(--soft); color:var(--ink); font:inherit; font-size:16px; resize:none; outline:none;}
textarea.note:focus{border-color:var(--caribe); background:#fff;}
.send-btn{display:block; width:100%; height:54px; border-radius:999px; background:var(--gold); color:var(--ink); font-size:16px; font-weight:700; transition:transform .15s ease, background .2s;}
.send-btn:hover{background:var(--gold-dark);}
.send-btn:active{transform:scale(.98);}
.clear-btn{display:block; width:100%; height:40px; color:var(--muted); font-size:14px;}
.clear-btn:hover{color:var(--danger);}

/* ============ AVISO ============ */
.toast{position:fixed; z-index:120; left:50%; bottom:calc(24px + env(safe-area-inset-bottom,0px)); transform:translate(-50%,12px); opacity:0; pointer-events:none; padding:12px 20px; border-radius:999px; background:var(--ink); color:#fff; font-weight:600; font-size:15px; box-shadow:0 12px 30px rgba(11,29,51,.3); transition:all .25s ease; white-space:nowrap;}
.toast.show{opacity:1; transform:translate(-50%,0);}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important; animation-duration:.01ms !important; scroll-behavior:auto !important;}
}