/* Identidad de un solo tema (madera, vino dulce, azulejo y cal), pintada explícitamente */
:root{
  color-scheme: light;
  --cal:#F3F1EC;
  --cal-2:#E8E3DA;
  --cal-luz:#F6F0E6;
  --madera:#2A1512;
  --madera-2:#3B211B;
  --madera-linea:#4A2E27;
  --moscatel:#D39B3A;
  --tinta:#1E2124;
  --tinta-2:#565B60;
  --azulejo:#1D4F91;
  --azulejo-2:#163C6E;
  --albero:#D39B3A;
  --pizarra:#23282B;
  --pizarra-linea:#3A4145;
  --tiza:#F1EEE6;
  --tiza-2:#A9AEA9;
  --wa:#1F8F4E;
  --wa-2:#187540;
  --linea:#DAD2C4;
  --display:'Gloock', Georgia, 'Times New Roman', serif;
  --herradura:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 125' preserveAspectRatio='none'%3E%3Cpath d='M16 125V65.07A40 40 0 1 1 84 65.07V125Z'/%3E%3C/svg%3E");
  --body:'Figtree', -apple-system, 'Segoe UI', Roboto, sans-serif;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{ margin:0; background:var(--cal); color:var(--tinta); font-family:var(--body); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; }
a{ color:inherit; }
.wrap{ max-width:1120px; margin:0 auto; padding-inline:20px; }
h1,h2,h3{ font-family:var(--display); font-weight:600; line-height:1.08; margin:0; text-wrap:balance; }
.eyebrow{ font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--azulejo); }

/* Franja de azulejo: detalle de identidad */
.tiles{
  height:22px;
  background:
    radial-gradient(circle at 50% 50%, var(--albero) 0 3px, transparent 3.5px),
    conic-gradient(from 45deg, var(--azulejo) 0 25%, var(--cal) 0 50%, var(--azulejo) 0 75%, var(--cal) 0);
  background-size:22px 22px, 22px 22px;
}

/* Cabecera */
header.top{ position:sticky; top:env(safe-area-inset-top, 0px); z-index:20; background:rgba(245,241,232,.94); backdrop-filter:blur(6px); border-bottom:1px solid var(--linea); }
.top .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:12px; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand-mark{ width:34px; height:34px; border-radius:6px; background:var(--azulejo); display:grid; place-items:center; color:var(--cal); font-family:var(--display); font-weight:700; font-size:17px; }
.brand-name{ font-family:var(--display); font-weight:600; font-size:19px; }
nav.links{ display:flex; gap:22px; font-size:14.5px; font-weight:500; }
nav.links a{ text-decoration:none; color:var(--tinta-2); }
nav.links a:hover, nav.links a:focus-visible{ color:var(--azulejo); }

.btn-wa{
  display:inline-flex; align-items:center; gap:9px; background:var(--wa); color:#fff; text-decoration:none;
  font-weight:600; font-size:15px; padding:12px 18px; border-radius:999px; border:0; cursor:pointer; white-space:nowrap;
}
.btn-wa:hover{ background:var(--wa-2); }
.btn-wa:focus-visible, .btn-ghost:focus-visible, nav.links a:focus-visible{ outline:3px solid var(--albero); outline-offset:2px; }
.btn-wa svg{ width:19px; height:19px; flex:none; }
.btn-wa.sm{ padding:9px 14px; font-size:14px; }
.btn-ghost{ display:inline-flex; align-items:center; gap:8px; color:var(--azulejo); font-weight:600; text-decoration:none; padding:12px 4px; }

/* Hero */
.hero .wrap{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:48px; align-items:center; padding-block:56px 64px; }
.hero h1{ font-size:clamp(38px,5.6vw,68px); letter-spacing:-.01em; margin-top:14px; }
.hero h1 em{ font-style:italic; color:var(--azulejo); }
.hero .lead{ font-size:19px; color:var(--tinta-2); max-width:34ch; margin:20px 0 28px; }
.hero-ctas{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; }
.note-pending{ display:none; margin-top:14px; font-size:13px; color:#8A5A00; background:#FBEFD2; border:1px solid #F0D9A0; padding:6px 10px; border-radius:6px; width:fit-content; }
.pending .note-pending{ display:block; }
.facts{ display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:30px; font-size:14px; color:var(--tinta-2); }
.facts span{ display:inline-flex; align-items:center; gap:7px; }
.facts b{ color:var(--tinta); font-weight:600; }
.dot-open{ width:8px; height:8px; border-radius:50%; background:var(--wa); display:inline-block; }
.dot-open.closed{ background:#B4533A; }

/* Móvil con la conversación */
.phone{ background:var(--pizarra); border-radius:28px; padding:14px; box-shadow:0 24px 50px rgba(30,33,36,.22); max-width:360px; margin-left:auto; width:100%; }
.phone-screen{ background:#ECE5DA; border-radius:18px; overflow:hidden; }
.chat-head{ background:#0B5C3B; color:#fff; display:flex; align-items:center; gap:10px; padding:12px 14px; }
.chat-head .av{ width:34px; height:34px; border-radius:50%; background:var(--azulejo); display:grid; place-items:center; font-family:var(--display); font-weight:700; font-size:15px; }
.chat-head b{ display:block; font-size:14.5px; font-weight:600; }
.chat-head small{ font-size:12px; opacity:.85; }
.chat{ padding:14px 12px 16px; display:flex; flex-direction:column; gap:8px; min-height:300px; }
.msg{ max-width:84%; padding:8px 11px 6px; border-radius:9px; font-size:14px; line-height:1.4; box-shadow:0 1px 0 rgba(0,0,0,.06); }
.msg.in{ background:#fff; align-self:flex-start; border-top-left-radius:2px; }
.msg.out{ background:#D8F5C6; align-self:flex-end; border-top-right-radius:2px; }
.msg .t{ display:block; text-align:right; font-size:10.5px; color:#6B7177; margin-top:2px; font-variant-numeric:tabular-nums; }
.chat .stamp{ align-self:center; font-size:11.5px; color:#4E5A52; background:#DCEFE2; padding:3px 9px; border-radius:6px; }

/* Bloque reservar */
.reserve{ background:var(--azulejo); color:var(--cal); }
.reserve .wrap{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:48px; align-items:center; padding-block:56px; }
.reserve .eyebrow{ color:var(--albero); }
.reserve h2{ font-size:clamp(28px,3.6vw,44px); margin-top:10px; max-width:18ch; }
.reserve p{ color:#D6E0EE; max-width:52ch; margin:14px 0 0; }
.steps{ list-style:none; padding:0; margin:26px 0 30px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.steps li{ border-top:1px solid rgba(245,241,232,.3); padding-top:12px; font-size:15px; color:#E9EEF5; }
.steps b{ display:block; font-family:var(--display); font-size:22px; color:var(--albero); font-weight:600; margin-bottom:2px; }
.qr-card{ background:var(--cal); color:var(--tinta); border-radius:14px; padding:18px; text-align:center; width:236px; }
.qr-box{ width:200px; height:200px; margin:0 auto; display:grid; place-items:center; }
.qr-box img, .qr-box canvas{ width:200px !important; height:200px !important; }
.qr-empty{ width:200px; height:200px; border:2px dashed var(--linea); border-radius:10px; display:grid; place-items:center; padding:16px; font-size:13px; color:var(--tinta-2); }
.qr-card p{ color:var(--tinta-2); font-size:13px; margin:12px 0 0; }

/* Carta en pizarra */
.carta{ padding-block:72px; }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:28px; }
.section-head h2{ font-size:clamp(30px,3.8vw,46px); margin-top:8px; }
.section-head p{ color:var(--tinta-2); max-width:44ch; margin:0; font-size:15px; }
.pizarra{ background:var(--pizarra); color:var(--tiza); border-radius:10px; padding:34px 36px; border:10px solid #6B4A2E; box-shadow:inset 0 0 60px rgba(0,0,0,.35); }
.pizarra-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px 56px; }
.pizarra h3{ font-size:22px; color:var(--albero); margin-bottom:10px; font-weight:600; }
.plato{ display:grid; grid-template-columns:1fr auto; gap:6px 14px; align-items:baseline; padding:9px 0; border-bottom:1px dashed var(--pizarra-linea); }
.plato:last-child{ border-bottom:0; }
.plato .n{ font-size:16px; }
.plato .n small{ display:block; color:var(--tiza-2); font-size:13px; }
.plato .p{ font-family:var(--display); font-size:18px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.sg{ display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.06em; color:var(--pizarra); background:var(--albero); border-radius:4px; padding:1px 5px; margin-left:6px; vertical-align:2px; }
.pizarra-foot{ margin-top:22px; padding-top:16px; border-top:1px solid var(--pizarra-linea); font-size:14px; color:var(--tiza-2); display:flex; flex-wrap:wrap; gap:8px 24px; }

/* Horario y ubicación */
.info{ padding-block:0 72px; }
.info .wrap{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; }
.panel{ background:#fff; border:1px solid var(--linea); border-radius:12px; padding:28px; }
.panel h2{ font-size:28px; margin:8px 0 18px; }
table.horario{ width:100%; border-collapse:collapse; font-size:15px; }
.horario th, .horario td{ text-align:left; padding:10px 0; border-bottom:1px solid var(--cal-2); font-variant-numeric:tabular-nums; }
.horario th{ font-weight:600; width:38%; }
.horario td{ color:var(--tinta-2); }
.horario tr.hoy th, .horario tr.hoy td{ color:var(--azulejo); font-weight:700; }
.horario tr.hoy th::after{ content:"hoy"; margin-left:8px; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; background:var(--azulejo); color:#fff; padding:2px 6px; border-radius:4px; vertical-align:2px; }
.panel .small{ font-size:13.5px; color:var(--tinta-2); margin-top:14px; }
.dir p{ margin:0 0 10px; }
.dir .addr{ font-family:var(--display); font-size:21px; color:var(--tinta); }
.dir ul{ margin:16px 0 0; padding-left:18px; color:var(--tinta-2); font-size:15px; }
.dir li{ margin-bottom:6px; }

footer{ background:var(--pizarra); color:var(--tiza-2); font-size:14px; }
footer .wrap{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px 30px; padding-block:30px; }
footer b{ color:var(--tiza); font-family:var(--display); font-weight:600; font-size:17px; }
.demo-note{ width:100%; font-size:12.5px; color:#8C928E; border-top:1px solid var(--pizarra-linea); padding-top:14px; }

/* Capa para el dueño del restaurante (Resto Solutions AI) */
.owner-bar{ background:var(--tinta); color:var(--tiza); font-size:13.5px; }
.owner-bar .wrap{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 20px; padding-block:9px; }
.owner-bar b{ color:var(--albero); font-weight:600; }
.owner-bar a{ color:var(--tiza); font-weight:600; text-decoration:none; border-bottom:1px solid rgba(241,238,230,.4); white-space:nowrap; }
.owner-bar a:focus-visible{ outline:3px solid var(--albero); outline-offset:2px; }
.owner{ background:var(--cal-2); border-top:1px solid var(--linea); }
.owner .wrap{ padding-block:72px; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:48px; align-items:end; }
.owner h2{ font-size:clamp(30px,4vw,50px); max-width:24ch; margin-top:10px; }
.owner h2 em{ font-style:italic; color:var(--azulejo); }
.owner .sub{ font-size:20px; color:var(--tinta); max-width:40ch; margin:20px 0 0; font-family:var(--display); }
.owner .how{ font-size:15.5px; color:var(--tinta-2); max-width:52ch; margin:18px 0 0; }
.owner-contact{ display:flex; flex-direction:column; gap:10px; font-size:15px; }
.owner-contact .lbl{ font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--tinta-2); }
.owner-contact a{ color:var(--azulejo); font-weight:600; text-decoration:none; border-bottom:1px solid var(--linea); width:fit-content; }
.owner-contact .sel{ user-select:all; color:var(--tinta); font-weight:600; }

/* Botón flotante */
.fab{ position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); z-index:30; box-shadow:0 10px 24px rgba(31,143,78,.35); }

@media (max-width: 860px){
  nav.links{ display:none; }
  .hero .wrap, .reserve .wrap, .info .wrap{ grid-template-columns:1fr; gap:32px; }
  .hero .wrap{ padding-block:36px 48px; }
  .phone{ margin:0 auto; }
  .steps{ grid-template-columns:1fr; gap:12px; }
  .qr-card{ margin:0 auto; }
  .pizarra{ padding:24px 18px; border-width:7px; }
  .pizarra-grid{ grid-template-columns:1fr; gap:26px; }
  .top .btn-wa{ display:none; }
  .owner .wrap{ grid-template-columns:1fr; gap:32px; padding-block:52px; }
}

/* Utilidades (sin estilos en línea: la CSP no los permite) */
[hidden]{ display:none !important; }
.sprite{ position:absolute; }
.sg-inline{ margin-left:0; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.how-list{ margin:16px 0 0; padding-left:18px; color:var(--tinta-2); font-size:15px; max-width:52ch; }
.how-list li{ margin-bottom:6px; }
.how-list b{ color:var(--tinta); }
.webchat .qr-card p{ font-weight:600; color:var(--tinta); }

/* ---------- Chat estilo WhatsApp ---------- */
body.chat-open{ overflow:hidden; }
.wa-overlay{ position:fixed; inset:0; z-index:100; background:rgba(20,24,27,.72); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px)); }
.wa-shell{ display:flex; gap:20px; align-items:stretch; height:min(760px, 100%); width:min(800px, 100%); }
.wa-phone{ flex:0 0 400px; display:flex; flex-direction:column; background:#EFE7DC; border-radius:22px; overflow:hidden; box-shadow:0 30px 60px rgba(0,0,0,.35); border:10px solid var(--pizarra); }
.wa-head{ background:#0B5C3B; color:#fff; display:flex; align-items:center; gap:10px; padding:10px 12px; flex:none; }
.wa-head .av{ width:38px; height:38px; flex:none; border-radius:50%; background:var(--azulejo); display:grid; place-items:center; font-family:var(--display); font-weight:700; font-size:16px; }
.wa-who{ flex:1; min-width:0; line-height:1.25; }
.wa-who b{ display:block; font-size:15.5px; font-weight:600; }
.wa-who small{ font-size:12.5px; opacity:.85; }
.wa-icon{ width:36px; height:36px; flex:none; border:0; background:transparent; color:inherit; border-radius:50%; display:grid; place-items:center; cursor:pointer; padding:0; }
.wa-icon svg{ width:22px; height:22px; }
.wa-icon:hover{ background:rgba(255,255,255,.12); }
.wa-icon:focus-visible, .wa-owner-btn:focus-visible, .wa-send:focus-visible, .wa-chips button:focus-visible, .own-remind-btn:focus-visible{ outline:3px solid var(--albero); outline-offset:2px; }
.wa-owner-btn{ display:none; position:relative; border:1px solid rgba(255,255,255,.4); background:transparent; color:#fff; font:600 13px var(--body); padding:7px 11px; border-radius:999px; cursor:pointer; white-space:nowrap; }
.wa-badge{ position:absolute; top:-6px; right:-6px; min-width:20px; height:20px; border-radius:10px; background:var(--albero); color:var(--tinta); font-size:12px; font-weight:700; display:grid; place-items:center; padding:0 5px; }

.wa-body{ flex:1; overflow-y:auto; padding:14px 12px; display:flex; flex-direction:column; gap:8px; background-color:#EFE7DC; overscroll-behavior:contain; }
.wa-note{ align-self:center; text-align:center; max-width:90%; font-size:12.5px; line-height:1.4; color:#5B4A1E; background:#FCEFC7; padding:7px 11px; border-radius:8px; }
.wa-stamp{ align-self:center; font-size:12px; color:#3F5147; background:#DCEFE2; padding:4px 10px; border-radius:7px; text-align:center; max-width:90%; }
.wa-stamp.warn{ background:#FBE3D6; color:#7A3B1E; }
.wa-msg{ max-width:84%; padding:7px 10px 5px; border-radius:9px; font-size:14.5px; line-height:1.42; box-shadow:0 1px 0 rgba(0,0,0,.08); white-space:pre-line; overflow-wrap:anywhere; animation:wa-in .18s ease-out; }
.wa-msg.in{ background:#fff; align-self:flex-start; border-top-left-radius:2px; }
.wa-msg.out{ background:#D9FDD3; align-self:flex-end; border-top-right-radius:2px; }
.wa-msg .lbl{ display:block; font-size:11.5px; font-weight:700; color:#0B5C3B; margin-bottom:2px; }
.wa-msg .t{ display:block; text-align:right; font-size:10.5px; color:#667781; margin-top:2px; font-variant-numeric:tabular-nums; }
.wa-msg.out .t::after{ content:" ✓✓"; color:#53BDEB; letter-spacing:-2px; }
.wa-msg.error{ background:#FDE2E0; }
.wa-typing{ align-self:flex-start; background:#fff; border-radius:9px; border-top-left-radius:2px; padding:10px 12px; display:flex; gap:4px; }
.wa-typing i{ width:7px; height:7px; border-radius:50%; background:#9AA5AB; animation:wa-dot 1.2s infinite; }
.wa-typing i:nth-child(2){ animation-delay:.15s; }
.wa-typing i:nth-child(3){ animation-delay:.3s; }
@keyframes wa-dot{ 0%,60%,100%{ opacity:.35; transform:none; } 30%{ opacity:1; transform:translateY(-3px); } }
@keyframes wa-in{ from{ opacity:0; transform:translateY(4px); } }
@media (prefers-reduced-motion: reduce){ .wa-msg, .wa-typing i, .own-item.nueva, .wa-owner.alerta .own-btn-alt{ animation:none; } .own-switch-ui, .own-switch-ui::after{ transition:none; } }

.wa-chips{ display:flex; gap:8px; overflow-x:auto; padding:8px 10px 2px; flex:none; scrollbar-width:none; }
.wa-chips button{ flex:none; border:1px solid #BFD8C9; background:#fff; color:#0B5C3B; font:500 13px var(--body); padding:7px 12px; border-radius:999px; cursor:pointer; }
.wa-input{ display:flex; gap:8px; padding:8px 10px 10px; flex:none; align-items:center; }
.wa-input input{ flex:1; min-width:0; border:0; border-radius:999px; padding:12px 16px; font:16px var(--body); background:#fff; color:var(--tinta); box-shadow:0 1px 0 rgba(0,0,0,.08); }
.wa-input input:focus{ outline:2px solid #0B5C3B; }
.wa-send{ width:46px; height:46px; flex:none; border:0; border-radius:50%; background:var(--wa); color:#fff; display:grid; place-items:center; cursor:pointer; }
.wa-send:disabled{ opacity:.55; cursor:default; }
.wa-send svg{ width:21px; height:21px; }

/* Panel del dueño */
.wa-owner{ flex:1; min-width:0; background:var(--cal); border-radius:16px; padding:22px 20px; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 30px 60px rgba(0,0,0,.3); }
.own-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.own-top h2{ font-size:25px; margin-top:6px; }
.own-close{ display:none; color:var(--tinta); }
.own-close:hover{ background:var(--cal-2); }
.own-sub{ font-size:14px; color:var(--tinta-2); margin:8px 0 16px; }
.own-list{ list-style:none; margin:0; padding:0; flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:10px; }
.own-empty{ border:2px dashed var(--linea); border-radius:12px; padding:22px 16px; text-align:center; color:var(--tinta-2); font-size:14px; }
.own-item{ background:#fff; border:1px solid var(--linea); border-radius:12px; padding:13px 14px; display:grid; grid-template-columns:auto 1fr; gap:3px 12px; }
.own-item.nueva{ animation:own-flash 1.6s ease-out; }
@keyframes own-flash{ 0%{ background:#FCEFC7; border-color:var(--albero); } 100%{ background:#fff; } }
.own-time{ grid-row:span 2; font-family:var(--display); font-size:24px; font-weight:600; color:var(--azulejo); line-height:1.1; font-variant-numeric:tabular-nums; }
.own-time small{ display:block; font-family:var(--body); font-size:12px; font-weight:600; color:var(--tinta-2); }
.own-name{ font-weight:600; display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; }
.own-meta{ font-size:13.5px; color:var(--tinta-2); }
.own-pill{ font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:2px 7px; border-radius:5px; background:var(--cal-2); color:var(--tinta-2); }
.own-pill.p-nueva{ background:#E3ECF8; color:var(--azulejo); }
.own-pill.p-pendiente{ background:#FCEFC7; color:#7A5500; }
.own-pill.p-confirmada{ background:#D9F2E1; color:#146B3A; }
.own-pill.p-cancelada{ background:#FBE3D6; color:#8A3A1B; }
.own-item.cancelada .own-time{ text-decoration:line-through; opacity:.6; }
.own-controls{ border-top:1px solid var(--linea); margin-top:14px; padding-top:14px; display:flex; flex-direction:column; gap:12px; }
.own-switch{ display:flex; align-items:center; gap:12px; cursor:pointer; font-size:14.5px; }
.own-switch input{ position:absolute; opacity:0; width:1px; height:1px; }
.own-switch small{ display:block; font-size:12.5px; color:var(--tinta-2); }
.own-switch-ui{ flex:none; width:44px; height:26px; border-radius:13px; background:var(--linea); position:relative; transition:background .15s; }
.own-switch-ui::after{ content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:transform .15s; }
.own-switch input:checked + .own-switch-ui{ background:var(--wa); }
.own-switch input:checked + .own-switch-ui::after{ transform:translateX(18px); }
.own-switch input:focus-visible + .own-switch-ui{ outline:3px solid var(--albero); outline-offset:2px; }
.own-actions{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.own-btn{ border:0; border-radius:999px; background:var(--azulejo); color:#fff; font:600 14.5px var(--body); padding:11px 12px; cursor:pointer; }
.own-btn:hover:not(:disabled){ background:var(--azulejo-2); }
.own-btn:disabled{ background:var(--linea); color:var(--tinta-2); cursor:default; }
.own-btn-alt{ background:#fff; color:var(--tinta); border:1.5px solid var(--tinta); }
.own-btn-alt:hover:not(:disabled){ background:var(--cal-2); }
.own-btn-alt[aria-pressed="true"]{ background:var(--albero); border-color:var(--albero); color:var(--tinta); }
.own-btn:focus-visible{ outline:3px solid var(--albero); outline-offset:2px; }
.own-hint{ font-size:12.5px; color:var(--tinta-2); margin:0; }
.own-hint.activo{ color:#7A5500; font-weight:600; }
.wa-owner.alerta .own-btn-alt{ animation:own-pulse 1.2s ease-in-out 3; }
@keyframes own-pulse{ 50%{ box-shadow:0 0 0 6px rgba(224,168,58,.45); } }

/* Barra "Escribes como" cuando el dueño responde en persona */
.wa-role{ display:flex; align-items:center; gap:6px; padding:8px 10px 0; font-size:12.5px; color:#3F5147; flex:none; }
.wa-role span{ margin-right:2px; }
.wa-role button{ border:1px solid #BFD8C9; background:#fff; color:#0B5C3B; font:600 12.5px var(--body); padding:6px 12px; border-radius:999px; cursor:pointer; }
.wa-role button[aria-pressed="true"]{ background:#0B5C3B; border-color:#0B5C3B; color:#fff; }
.wa-role button:focus-visible{ outline:3px solid var(--albero); outline-offset:2px; }
.wa-msg .lbl.dueno{ color:#8A5A00; }

@media (max-width: 860px){
  .wa-overlay{ padding:0; background:#EFE7DC; backdrop-filter:none; }
  .wa-shell{ width:100%; height:100%; position:relative; }
  .wa-phone{ flex:1; border:0; border-radius:0; box-shadow:none; }
  .wa-head{ padding-top:max(10px, env(safe-area-inset-top, 0px)); }
  .wa-input{ padding-bottom:max(10px, env(safe-area-inset-bottom, 0px)); }
  .wa-owner-btn{ display:inline-block; }
  .wa-owner{ position:absolute; inset:auto 0 0 0; max-height:82%; border-radius:18px 18px 0 0; transform:translateY(105%); transition:transform .25s ease; padding-bottom:max(18px, env(safe-area-inset-bottom, 0px)); z-index:2; }
  .wa-owner.open{ transform:none; }
  .own-close{ display:grid; }
}
@media (max-width: 860px) and (prefers-reduced-motion: reduce){ .wa-owner{ transition:none; } }
.own-sub a{ color:var(--azulejo); font-weight:600; white-space:nowrap; }

/* ---------- Agenda del mes ---------- */
.agenda{ padding-block:0 72px; }
.ag{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:24px; align-items:start; }
.ag-cal, .ag-dia{ background:#fff; border:1px solid var(--linea); border-radius:12px; padding:20px; }
.ag-nav{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.ag-nav h3{ font-size:24px; }
.ag-flecha{ width:40px; height:40px; border-radius:50%; border:1px solid var(--linea); background:var(--cal); color:var(--tinta); font-size:22px; line-height:1; cursor:pointer; }
.ag-flecha:hover:not(:disabled){ background:var(--cal-2); }
.ag-flecha:disabled{ opacity:.35; cursor:default; }
.ag-flecha:focus-visible, .ag-d:focus-visible, .ag-accion:focus-visible{ outline:3px solid var(--albero); outline-offset:2px; }
.ag-semana, .ag-grid{ display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:6px; }
.ag-semana{ margin-bottom:6px; font-size:12px; font-weight:700; color:var(--tinta-2); text-align:center; }
.ag-d{ position:relative; aspect-ratio:1 / .9; min-width:0; border:1px solid var(--linea); border-radius:8px; background:var(--cal); padding:6px 6px 8px; text-align:left; display:flex; flex-direction:column; justify-content:space-between; cursor:pointer; font:inherit; color:var(--tinta); overflow:hidden; }
.ag-d:hover{ border-color:var(--azulejo); }
.ag-d b{ font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; }
.ag-d small{ font-size:11px; color:var(--tinta-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ag-d::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--nivel, transparent); }
.ag-d.n-libre{ --nivel:#7CC49A; }
.ag-d.n-medio{ --nivel:var(--albero); }
.ag-d.n-alto{ --nivel:#D9822B; }
.ag-d.n-completo{ --nivel:#B4533A; background:#FBEDE7; }
.ag-d.n-cerrado{ background:transparent; border-style:dashed; color:var(--tinta-2); }
.ag-d.pasado{ opacity:.5; }
.ag-d.hoy{ border:2px solid var(--azulejo); }
.ag-d.sel{ background:var(--azulejo); border-color:var(--azulejo); color:#fff; }
.ag-d.sel small{ color:#D6E0EE; }
.ag-d.mia b::after{ content:"●"; color:var(--wa); font-size:10px; margin-left:4px; vertical-align:2px; }
.ag-d.sel.mia b::after{ color:#9BE7B8; }
.ag-vacio{ aspect-ratio:1 / .9; }
.ag-leyenda{ display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:14px; font-size:12.5px; color:var(--tinta-2); }
.ag-leyenda span{ display:inline-flex; align-items:center; gap:6px; }
.ag-leyenda i{ width:14px; height:4px; border-radius:2px; display:inline-block; }
.ag-leyenda .n-libre{ background:#7CC49A; }
.ag-leyenda .n-medio{ background:var(--albero); }
.ag-leyenda .n-alto{ background:#D9822B; }
.ag-leyenda .n-completo{ background:#B4533A; }

.ag-dia h3{ font-size:22px; margin-bottom:12px; }
.ag-dia h3::first-letter{ text-transform:uppercase; }
.ag-franjas{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.ag-franja{ font-size:12.5px; font-variant-numeric:tabular-nums; padding:4px 8px; border-radius:6px; background:#E6F4EC; color:#146B3A; }
.ag-franja.poco{ background:#FCEFC7; color:#7A5500; }
.ag-franja.lleno{ background:#FBE3D6; color:#8A3A1B; text-decoration:line-through; }
.ag-lista{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.ag-res{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:2px 12px; padding:5px 0; border-top:1px solid rgba(0,0,0,.06); }
.ag-res:first-child{ border-top:0; }
.ag-res .t{ min-width:0; }
.ag-res .t small{ opacity:.8; }
.ag-res .acciones{ display:flex; flex-wrap:wrap; gap:12px; }
.ag-res.mia{ margin:0 -8px; padding:5px 8px; border-radius:6px; background:#E6F4EC; }
.ag-res.novino .t{ text-decoration:line-through; opacity:.6; }
.ag-tag{ display:inline-block; margin-left:8px; padding:1px 7px; border-radius:999px; background:#F3E1D8; color:#8A3A1B; font-size:11.5px; font-weight:600; vertical-align:1px; }
.ag-tag.chat{ background:#BFE3CD; color:#1F5C3A; }
.ag-g .n small{ color:#8A3A1B; font-size:12.5px; }
.ag-accion{ border:0; background:none; color:var(--azulejo); font:600 13px var(--body); padding:2px 0; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.ag-accion.peligro{ color:#8A3A1B; }
.ag-vacia{ color:var(--tinta-2); font-size:14px; padding:6px 0; }
.ag-g details{ border-radius:8px; background:var(--cal); font-size:14px; }
.ag-g summary{ display:grid; grid-template-columns:52px 1fr auto 14px; gap:10px; align-items:center; padding:9px 10px; cursor:pointer; list-style:none; }
.ag-g summary::-webkit-details-marker{ display:none; }
.ag-g summary::after{ content:"›"; color:var(--tinta-2); transition:transform .15s; }
.ag-g details[open] summary::after{ transform:rotate(90deg); }
.ag-g summary:focus-visible{ outline:3px solid var(--albero); outline-offset:2px; border-radius:8px; }
.ag-g .h{ font-weight:700; font-variant-numeric:tabular-nums; color:var(--azulejo); }
.ag-g .n{ color:var(--tinta); }
.ag-g .p{ font-size:13px; color:var(--tinta-2); white-space:nowrap; }
.ag-nombres{ list-style:none; margin:0; padding:0 10px 10px 72px; display:flex; flex-direction:column; gap:3px; font-size:13.5px; color:var(--tinta-2); }
@media (prefers-reduced-motion: reduce){ .ag-g summary::after{ transition:none; } }
.ag-error{ margin:10px 0 0; padding:8px 10px; border-radius:8px; background:#FBE3D6; color:#7A3B1E; font-size:13.5px; }
.ag-nueva{ width:100%; margin-top:14px; }
.ag-form{ margin-top:14px; padding-top:14px; border-top:1px solid var(--linea); display:flex; flex-direction:column; gap:10px; }
.ag-form h4{ margin:0; font-size:15px; }
.ag-form label{ display:flex; flex-direction:column; gap:4px; font-size:13px; font-weight:600; color:var(--tinta-2); min-width:0; }
.ag-form input, .ag-form select{ font:15px var(--body); color:var(--tinta); padding:9px 10px; border:1px solid var(--linea); border-radius:8px; background:#fff; width:100%; }
.ag-form input:focus, .ag-form select:focus{ outline:2px solid var(--azulejo); outline-offset:0; }
.ag-form-fila{ display:grid; grid-template-columns:1.3fr 1fr .8fr; gap:8px; }
.ag-form-botones{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }

@media (max-width: 860px){
  .ag{ grid-template-columns:1fr; }
  .ag-cal, .ag-dia{ padding:14px; }
  .ag-semana, .ag-grid{ gap:4px; }
  .ag-d{ padding:4px 4px 7px; aspect-ratio:1 / 1.05; }
  .ag-d b{ font-size:13px; }
  .ag-d small{ font-size:11px; }
  .ag-d .u{ display:none; }
  .ag-nombres{ padding-left:20px; }
}

/* =====================================================================
   Taberna malagueña de noche: madera, vino dulce, azulejo y cal.
   Firma: la portada en vídeo dentro de un arco de herradura (Alcazaba de Málaga)
   con marco de azulejo.
   ===================================================================== */
html{ font-synthesis:none; } /* Gloock solo tiene un peso: nada de negritas o cursivas falsas */
h1,h2,h3,h4{ font-weight:400; }

/* Cabecera oscura, continuación de la portada */
header.top{ background:rgba(42,21,18,.94); border-bottom:1px solid var(--madera-linea); }
.brand-name{ color:var(--cal-luz); font-size:22px; font-weight:400; }
.brand-mark{ font-weight:400; font-size:19px; }
nav.links a{ color:#D6C4B6; }
nav.links a:hover, nav.links a:focus-visible{ color:var(--moscatel); }

/* Portada */
.hero{ background:var(--madera); color:var(--cal-luz); overflow:hidden; }
.hero .wrap{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:40px; padding-block:64px 88px; }
.hero .eyebrow{ color:var(--moscatel); }
.hero h1{ color:var(--cal-luz); font-size:clamp(46px,6.2vw,86px); line-height:1; letter-spacing:-.015em; margin-top:18px; }
.hero h1 em{ font-style:normal; color:var(--moscatel); }
.hero .lead{ color:#CDBBAE; font-size:18.5px; max-width:36ch; margin:24px 0 32px; }
.hero .btn-ghost{ color:var(--cal-luz); }
.hero .btn-ghost:hover{ color:var(--moscatel); }
.hero .facts{ color:#BCA89B; border-top:1px solid var(--madera-linea); padding-top:20px; margin-top:36px; }
.hero .facts b{ color:var(--cal-luz); }

.hero-media{ position:relative; justify-self:end; width:min(100%, 440px); }
.arco{
  position:relative; aspect-ratio:4 / 5;
  background:
    radial-gradient(circle at 50% 50%, var(--moscatel) 0 3px, transparent 3.5px),
    conic-gradient(from 45deg, var(--azulejo) 0 25%, var(--cal) 0 50%, var(--azulejo) 0 75%, var(--cal) 0);
  background-size:22px 22px, 22px 22px;
  -webkit-mask:var(--herradura) center / 100% 100% no-repeat;
  mask:var(--herradura) center / 100% 100% no-repeat;
}
.arco-video{
  position:absolute; inset:14px; width:calc(100% - 28px); height:calc(100% - 28px); object-fit:cover; display:block; background:var(--madera-2);
  -webkit-mask:var(--herradura) center / 100% 100% no-repeat;
  mask:var(--herradura) center / 100% 100% no-repeat;
}
.hero-media .phone{ color:var(--tinta); position:absolute; left:-96px; bottom:-36px; width:258px; max-width:none; padding:9px; border-radius:24px; background:#150B09; box-shadow:0 30px 60px rgba(0,0,0,.45); transform:rotate(-3deg); }
.hero-media .phone-screen{ border-radius:16px; }
.hero-media .chat-head{ padding:9px 11px; }
.hero-media .chat-head .av{ width:28px; height:28px; font-size:13px; font-weight:400; }
.hero-media .chat-head b{ font-size:13px; }
.hero-media .chat{ min-height:0; padding:10px 9px 12px; gap:6px; }
.hero-media .msg{ font-size:12.3px; padding:6px 9px 5px; }
.hero-media .msg .t{ font-size:9.5px; }

/* Entrada: una sola secuencia al cargar */
@media (prefers-reduced-motion: no-preference){
  .hero .eyebrow, .hero h1, .hero .lead, .hero-ctas, .hero .facts{ animation:subir .7s cubic-bezier(.2,.7,.2,1) both; }
  .hero h1{ animation-delay:.08s; }
  .hero .lead{ animation-delay:.18s; }
  .hero-ctas{ animation-delay:.26s; }
  .hero .facts{ animation-delay:.34s; }
  .arco{ animation:arco 1.1s cubic-bezier(.2,.7,.2,1) .1s both; }
  .hero-media .phone{ animation:movil .8s cubic-bezier(.2,.7,.2,1) .7s both; }
}
@keyframes subir{ from{ opacity:0; transform:translateY(14px); } }
@keyframes arco{ from{ opacity:0; transform:translateY(24px) scale(.97); } }
@keyframes movil{ from{ opacity:0; transform:translate(-10px, 24px) rotate(-3deg); } }

/* Carta: fotos de lo que más sale */
.platos-titulo{ font-size:24px; margin:0 0 16px; }
.platos{ list-style:none; margin:0 0 36px; padding:0; display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:16px; }
.platos figure{ margin:0; }
.platos img{ width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:10px; display:block; background:var(--cal-2); }
.platos figcaption{ display:flex; flex-direction:column; gap:2px; margin-top:10px; }
.platos figcaption span{ font-family:var(--display); font-size:17px; line-height:1.2; }
.platos figcaption b{ font-size:14px; font-weight:600; color:var(--tinta-2); white-space:nowrap; font-variant-numeric:tabular-nums; }

/* Dónde estamos: la calle en vídeo */
.dir-video{ margin:-28px -28px 24px; }
.dir-video video{ width:100%; aspect-ratio:16 / 9; object-fit:cover; display:block; border-radius:11px 11px 0 0; background:var(--cal-2); }

/* Para el dueño: foto de sala */
.owner-lado{ display:flex; flex-direction:column; gap:26px; }
.owner-foto{ margin:0; }
.owner-foto img{ width:100%; height:auto; aspect-ratio:4 / 5; object-fit:cover; border-radius:12px; display:block; }
.owner-foto figcaption{ font-family:var(--display); font-size:22px; line-height:1.2; margin-top:14px; color:var(--tinta); }
.owner .wrap{ align-items:start; }
.owner .wrap.owner-solo{ display:block; padding-block:40px; }
.info .wrap{ align-items:start; }

footer{ background:var(--madera); }
footer b{ font-weight:400; font-size:19px; }

@media (max-width: 1000px){
  .platos{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .hero-media .phone{ left:-40px; }
}
@media (max-width: 860px){
  .hero .wrap{ grid-template-columns:1fr; padding-block:40px 56px; gap:40px; }
  .hero-media{ justify-self:center; width:min(100%, 340px); }
  .hero-media .phone{ display:none; }
  .platos{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; margin-inline:-20px; padding:0 20px 6px; scrollbar-width:none; scroll-padding-inline:20px; }
  .platos li{ flex:0 0 62%; scroll-snap-align:start; }
  .dir-video{ margin:-28px -28px 20px; }
  .owner-foto img{ aspect-ratio:4 / 3; }
}

/* Área del dueño: página aparte con contraseña */
footer a.foot-dueno{ color:var(--tiza-2); font-size:13px; text-decoration:underline; text-underline-offset:3px; }
footer a.foot-dueno:hover, footer a.foot-dueno:focus-visible{ color:var(--moscatel); }
.dueno-page main{ min-height:calc(100vh - 66px); }
.dueno-page .agenda{ padding-block:48px 72px; }
.dueno-salir{ padding:9px 16px; background:transparent; color:var(--cal-luz); border-color:var(--madera-linea); }
.dueno-salir:hover:not(:disabled){ background:rgba(255,255,255,.08); }
.login .wrap{ display:grid; place-items:center; padding-block:72px; }
.login-card{ width:min(100%, 400px); background:#fff; border:1px solid var(--linea); border-radius:12px; padding:28px; display:flex; flex-direction:column; gap:10px; }
.login-card h1{ font-size:40px; margin:6px 0 0; }
.login-card p{ margin:0 0 8px; color:var(--tinta-2); font-size:15px; }
.login-card label{ font-size:13px; font-weight:600; color:var(--tinta-2); }
.login-card input{ font:16px var(--body); color:var(--tinta); padding:11px 12px; border:1px solid var(--linea); border-radius:8px; background:#fff; width:100%; }
.login-card input:focus{ outline:2px solid var(--azulejo); outline-offset:0; }
.login-card .ag-error{ margin:0; }
.login-card .own-btn{ margin-top:6px; padding:12px; }

/* Logo de Resto Solutions AI junto al nombre */
.rs-logo{ display:inline-block; vertical-align:-0.25em; margin-right:6px; }