/* SMARTLINK TOTAL · RESTAURANTE CHINO: EXPERENCIA EN MARCO DE MOVIL
 * Basado en el patrón estructural aprobado de Raíces Latinas: marco, cabecera,
 * zona central con scroll propio, navegación inferior fija y modal interior.
 * Archivos publicados y referencia 8135 intactos. */
:root{--ink:#fbf1dc;--muted:#c7c3ba;--accent:#bc3b2c;--accent2:#d4a662;--cream:#10151b;--white:#151c21;--stroke:#3a3a38;--gold:#e2c18b;--shadow:0 9px 30px rgba(0,0,0,.28)}
html,body{margin:0;height:100%;height:100dvh;overflow:hidden;color:var(--ink)}
body{background:radial-gradient(circle at 27% 4%,#264538 0%,#0c171a 56%,#06100f 100%);font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif}
.app-container{width:100%;height:100vh;height:100dvh;min-height:0;padding:20px;display:flex;justify-content:center;align-items:center;overflow:hidden}
.phone-mockup{width:100%;max-width:460px;height:min(940px,calc(100dvh - 50px));min-height:450px;display:flex;flex-direction:column;position:relative;overflow:hidden;border-radius:49px;background:#10161b;border:2px solid rgba(230,193,133,.31);box-shadow:0 20px 75px rgba(0,0,0,.75),0 0 0 8px #192331,0 0 0 11px #2c374b;isolation:isolate}
.phone-notch-area{height:49px;flex:0 0 49px;display:flex;align-items:center;justify-content:space-between;padding:7px 25px 2px;color:#f7f0de;background:#172e28;font-size:13px;font-weight:700;z-index:5;border-bottom:1px solid rgba(225,191,135,.15)}
.phone-dynamic-island{border-radius:30px;width:136px;height:28px;background:#000;color:#9fbeb2;display:flex;justify-content:center;align-items:center;font-size:11px;letter-spacing:.04em}
.phone-status-icons{font-size:12px;letter-spacing:.06em;color:#c2d2c8}
.head{height:103px;min-height:103px;flex:0 0 103px;background:linear-gradient(165deg,#19382c,#143128 68%,#183329);color:#fff;padding:7px 14px 9px 18px;display:flex;justify-content:space-between;align-items:stretch;gap:5px;position:relative;top:auto;border-bottom:1px solid rgba(223,178,106,.34);z-index:5}
.head-brand{background:none;border:0;min-width:0;flex:1;align-self:center;display:flex;flex-direction:column;justify-content:center;gap:5px;padding:4px 0;text-align:left}
.brand-small{color:var(--gold);letter-spacing:.07em;font-size:9px;font-weight:850;line-height:1.2}
.brand-title{font-family:Georgia,"Times New Roman",serif;color:#fff9e8;font-style:italic;font-size:clamp(18px,4.9vw,27px);line-height:1.05;letter-spacing:-.04em;white-space:normal;text-shadow:0 2px 3px #0007}
.brand-sub{font-size:9px;color:#ead1a4;letter-spacing:.03em;font-weight:650;line-height:1.24}
.head-right{display:flex;flex:0 0 170px;flex-direction:column;justify-content:space-between;align-items:flex-end;min-width:0;gap:9px}
.head-flags{display:flex;justify-content:flex-end;align-items:center;gap:4px;height:26px}
.flag{width:32px;height:23px;padding:1px;border:1px solid rgba(236,202,151,.38);background:#1a211e;border-radius:4px;overflow:hidden;display:flex;align-items:center;justify-content:center;opacity:.8}
.flag.active{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold);opacity:1}
.flag img{width:100%;height:100%;object-fit:cover}
.head-actions{display:flex;align-items:center;gap:7px}
.head .mesa{height:32px;display:flex;flex-direction:row;gap:5px;align-items:center;justify-content:center;border:1px solid var(--gold);border-radius:999px;padding:0 9px;color:var(--gold);font-size:11px;white-space:nowrap;background:#15251f;letter-spacing:0}
.head .mesa strong{color:#fff;font-size:12px}
.head .head-button{display:flex;align-items:center;justify-content:center;min-height:35px;height:35px;width:35px;padding:0;border:1px solid rgba(236,196,133,.64);background:#0e1916;color:var(--gold);border-radius:50%}
.head .head-button svg{width:19px;height:19px}
#main{width:100%;max-width:none;margin:0;min-height:0;flex:1 1 auto;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#626563 #15191a;background:#10151b;position:relative}
#main::-webkit-scrollbar{width:7px}#main::-webkit-scrollbar-thumb{background:#626563;border-radius:20px}
.view{max-width:none;width:100%;min-height:100%;padding-bottom:12px;background:#10151b;color:#fcf6ed}
.view[hidden]{display:none!important}
.nav.mobile-bottom-nav{position:relative;top:auto;left:auto;bottom:auto;right:auto;z-index:15;flex:0 0 72px;height:72px;min-height:72px;background:#090e16;border-top:1px solid rgba(221,183,123,.28);padding:4px 4px 6px;display:flex;align-items:stretch;justify-content:space-around;gap:1px;box-shadow:none}
.nav.mobile-bottom-nav .nav-button{display:flex;flex:1 1 0;flex-direction:column;gap:3px;align-items:center;justify-content:center;min-width:0;min-height:0;border-radius:12px;padding:5px 2px;color:#b8bdbb;border:1px solid transparent;background:transparent;font-weight:600;font-size:10.8px;white-space:nowrap}
.nav.mobile-bottom-nav .nav-button svg{width:23px;height:23px;flex:0 0 23px}
.nav.mobile-bottom-nav .nav-button span{font-size:10px;font-weight:700}
.nav.mobile-bottom-nav .nav-button.current{color:#ffdf9e;border:1px solid #dfb67f;box-shadow:inset 0 0 0 1px #d2a96d;background:#10171d}
.nav.mobile-bottom-nav .nav-button:hover:not(.current){color:white;background:#1f292d}
.hero{position:relative;display:block;width:100%;height:430px;min-height:430px;background:#111c1d;border-radius:0;overflow:hidden}
.hero-media{position:absolute;inset:0;width:100%;height:100%;min-height:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,16,18,.98) 0%,rgba(11,20,19,.72) 37%,rgba(10,18,17,.25) 71%,rgba(10,18,17,.05))}
.photo-disclaimer{bottom:auto;top:13px;left:12px;color:#f0ebd8;background:#0b1b1aa0;border:1px solid #cab69b74;padding:5px 8px;font-size:9px}
.hero-content{position:absolute;inset:0;width:100%;padding:22px 19px 24px;display:flex;align-items:flex-start;justify-content:flex-end;flex-direction:column;z-index:2;color:#fff;background:transparent}
.hero-content .eyebrow{font-size:11px;letter-spacing:.13em;color:#f4dba5}
.hero h1{font-family:Georgia,serif;font-style:italic;font-size:41px;line-height:1.08;color:#fff;margin:11px 0 12px;font-weight:bold;letter-spacing:-.03em;text-shadow:0 4px 13px #000a}
.hero p{font-size:13.5px;line-height:1.56;color:#f3efe2;margin:0;text-shadow:0 2px 6px #0007}
.hero-actions{gap:9px;margin-top:18px}
.primary,.secondary{border-radius:11px;min-height:41px;padding:9px 13px;font-size:12px;font-weight:800}
.primary{background:#a92e26;border-color:#ad4d39;color:white}
.secondary{border-color:#d4a772;color:#e7c392}
.hero .secondary{color:#ffe5bb}
.section-label{color:var(--gold);margin:26px 18px 13px;text-transform:uppercase;font-weight:750;font-size:11px;font-family:inherit;letter-spacing:.1em}
.signature-feature{margin:16px 18px 30px;padding:19px 16px 20px;border-radius:22px;border:1px solid rgba(226,196,142,.43);background:linear-gradient(145deg,#192436,#111924);box-shadow:0 14px 35px #0006}
.signature-badge{display:inline-flex;padding:6px 10px;border-radius:7px;background:#273343;color:#f8dba0;font-size:11px;font-weight:850;letter-spacing:.02em;margin-bottom:14px}
.signature-row{display:flex;align-items:center;gap:15px}
.signature-row img{height:119px;width:119px;flex:0 0 119px;object-fit:cover;border-radius:15px}
.signature-info{min-width:0;display:flex;flex-direction:column;gap:8px}
.signature-info h2{font-family:Georgia,serif;color:#fff;font-weight:750;font-size:19px;line-height:1.18;margin:0}
.signature-info p{color:#c9d0d3;font-size:12px;line-height:1.47;margin:0}
.signature-info button{color:#f8d69e;border:0;padding:0;background:transparent;font-size:12px;text-align:left;font-weight:850}
.tiles{padding:0 17px 20px;display:grid;grid-template-columns:1fr 1fr;gap:11px}
.tile{background:#18212a;border:1px solid #3e4b50;border-radius:18px;box-shadow:0 10px 24px #0003;min-width:0;color:#fff}
.tile img{height:138px;object-fit:cover}
.tile-text{padding:12px 11px 15px;gap:6px}
.tile-text strong{font:700 17px Georgia,serif;color:#fff}
.tile-text small{font-size:11px;color:#c5c7c6}
.tile-wide{grid-column:span 2;grid-template-columns:1fr 1fr}
.tile-wide img{height:162px}
.tile-wide .tile-text{display:flex;flex-direction:column;justify-content:center}
.disclaimer,.demo-hint{margin:13px 16px 20px;padding:11px 12px;background:#18242a;color:#cfc2ad;border:1px solid #79634b;border-radius:12px;font-size:11px;line-height:1.55}
.section-hero{padding:18px 16px;grid-template-columns:1fr 38%;gap:12px;min-height:170px;background:linear-gradient(145deg,#182d29,#112024)}
.section-hero .eyebrow{color:#edc991}
.section-hero h1{font-family:Georgia,serif;font-size:25px;color:#f7e9c6;line-height:1.15;margin:7px 0}
.section-hero p{font-size:12px;color:#d1c7b8;line-height:1.5}
.section-hero img{height:145px;border-radius:14px}
.drinks-hero{background:linear-gradient(145deg,#19242c,#122225)}
.family-nav{position:relative;top:auto;z-index:3;background:#11191e;border-bottom:1px solid #364344;padding:11px 14px}
.family-chip{font-size:11.5px;border-color:#526060;background:#1a242a;color:#e9d6bd;min-height:39px}
.family-chip.current{background:#ac382c;color:white;border-color:#ca684c}
.items-head{padding:20px 16px 4px}
.items-head h2{font-size:23px;color:#f7eee0}
.count{color:#c9bbac}
.product-grid{padding:15px 15px 23px;grid-template-columns:1fr;gap:11px}
.product-card{display:grid;grid-template-columns:116px 1fr;min-width:0;border-color:#46504e;background:#192126;border-radius:14px;box-shadow:none}
.product-card img{width:116px;height:100%;min-height:147px;object-fit:cover}
.product-data{padding:12px;gap:6px}
.product-data h3{font-size:15px;line-height:1.23;color:#fff}
.product-data p{font-size:11.5px;color:#c5c9c8;line-height:1.36;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.product-card .bottom{flex-direction:row;flex-wrap:wrap;align-items:center;gap:5px}
.price{color:#f1c38c;font-size:14px}
.chip-action{background:#263237;border-color:#72614d;color:#f5d6a4;padding:6px 9px;min-height:34px;font-size:11px}
.product-data > .chip-action{margin-top:3px}
.empty{background:#1a2228;border-color:#725e48;color:#e4d9ca}
.empty strong{color:#f1d59f}
.delivery-section-heading{padding:20px 17px 9px;background:#101b20}
.delivery-section-heading .eyebrow{color:var(--gold)}
.delivery-section-heading h1{font:700 25px Georgia,serif;color:#fff4e1}
.delivery-section-heading p{font-size:12px;color:#c8c7c3}
.delivery-frame-wrap{margin:0;border:0;border-top:1px solid #805b45;border-bottom:1px solid #805b45;border-radius:0;box-shadow:none;height:680px;min-height:680px;max-height:calc(100dvh - 330px);background:#15100f}
.delivery-frame-wrap iframe{height:100%;width:100%;border:0;display:block}
.mesa-footer{position:absolute;bottom:75px;left:9px;transform:none;max-width:none;width:calc(100% - 18px);z-index:12;padding:9px 12px 9px 13px;background:#253031;color:#fff;border:1px solid #e0bc82;border-radius:12px;box-shadow:0 10px 35px #0008}
.mesa-footer span{font-size:11px}
.mesa-footer .primary{font-size:10px;padding:9px;min-height:36px}
.footer{margin:20px 16px 0;max-width:none;padding:17px 10px 29px;color:#c4b9a8;border-top:1px solid #46504b;display:flex;gap:12px}
.footer img:first-child{width:130px;height:39px}
.footer img:nth-child(2){width:35px;height:35px}
.footer small{font-size:9px}
.modal-wrap{position:absolute;inset:0;z-index:100;display:flex;justify-content:center;align-items:flex-end;padding:0;border-radius:inherit;overflow:hidden}
.backdrop{position:absolute;inset:0;background:rgba(3,9,10,.79)}
.modal{background:#fef8ef;color:#33241e;width:100%;max-height:86%;overflow:auto;border-radius:20px 20px 0 0}
.modal-head{background:#fef8ef}
.modal-body{padding:16px}
.modal .warning{color:#68442d;background:#fcecd4}
.cartline{color:#33241e}
#modal .primary{min-height:42px;font-size:12px}
body:has(.phone-mockup) .view button:focus-visible, body:has(.phone-mockup) button:focus-visible{outline:2px solid #f6ce85;outline-offset:2px}
@media(max-width:600px){
 .app-container{padding:0;height:100dvh;align-items:flex-start}
 .phone-mockup{max-width:100%;height:100dvh;min-height:0;border-radius:0;box-shadow:none;border:0}
 .phone-notch-area{display:none}
 .head{height:100px;min-height:100px;flex-basis:100px}
 .brand-title{font-size:clamp(19px,5vw,24px)}
 .head-right{flex-basis:156px}
 .head-flags{gap:3px}
 .flag{width:29px}
 .nav.mobile-bottom-nav{height:70px;min-height:70px;flex-basis:70px}
 .hero{height:400px;min-height:400px}
 .hero h1{font-size:37px}
 .signature-row img{height:112px;width:112px;flex-basis:112px}
 .signature-info h2{font-size:18px}
 .delivery-frame-wrap{max-height:calc(100dvh - 285px)}
}
@media(max-width:350px){
 .head{padding:6px 9px}
 .head-right{flex-basis:139px}
 .brand-title{font-size:18px}
 .head .head-button{height:31px;width:31px;min-height:31px}
 .head .mesa{height:29px;font-size:9px;padding:0 6px}
 .flag{width:26px;height:20px}
 .nav.mobile-bottom-nav .nav-button span{font-size:9px}
 .nav.mobile-bottom-nav .nav-button svg{height:20px;width:20px}
 .signature-row img{height:97px;width:97px;flex-basis:97px}
 .hero h1{font-size:32px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* El foco program?tico mejora accesibilidad, sin dibujar un marco decorativo en t?tulos. */
.view h1[tabindex="-1"]:focus{outline:none!important}


/* 28/10/2026 — Ventanas dentro de la pantalla del teléfono.
   Patrón comprobable: cabecera fija + contenido interior desplazable + pie fijo.
   Ninguna ficha puede rebasar el alto útil entre cabecera y navegación inferior. */
.phone-mockup .modal-wrap{
  position:absolute;
  inset:152px 0 72px;
  height:auto;
  width:auto;
  min-height:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px;
  overflow:hidden;
}
.phone-mockup .modal-wrap .modal{
  box-sizing:border-box;
  width:100%;
  max-width:100%;
  height:auto;
  max-height:100%;
  min-height:0;
  overflow:hidden;
  border-radius:16px;
  display:flex;
  flex-direction:column;
  box-shadow:0 12px 35px rgba(0,0,0,.55);
}
.phone-mockup .modal-wrap .modal-head{
  position:relative;
  top:auto;
  display:flex;
  flex:0 0 auto;
  min-height:50px;
  padding:10px 12px;
  gap:8px;
}
.phone-mockup .modal-wrap .modal-head h2{
  font-family:Georgia,serif;
  font-size:clamp(17px,3.2vw,22px);
  line-height:1.18;
  overflow-wrap:anywhere;
  min-width:0;
}
.phone-mockup .modal-wrap .close{
  flex:0 0 40px;
  width:40px;
  height:40px;
  min-width:40px;
  min-height:40px;
  font-size:25px;
}
.phone-mockup .modal-wrap .modal-body{
  flex:1 1 auto;
  min-height:0;
  max-height:none;
  padding:12px 13px;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.phone-mockup .modal-wrap .modal-body img{
  display:block;
  width:100%;
  height:auto;
  max-height:clamp(120px,23dvh,205px);
  aspect-ratio:4 / 3;
  object-fit:contain;
  background:#ede6db;
  border-radius:11px;
  margin:0 0 8px;
}
.phone-mockup .modal-wrap .modal-body p{
  font-size:13px;
  line-height:1.47;
  margin:8px 0;
}
.phone-mockup .modal-wrap .modal-actions{
  position:relative;
  flex:0 0 auto;
  background:#fef8ef;
  display:flex;
  padding:10px 12px;
  gap:9px;
  align-items:center;
}
.phone-mockup .modal-wrap .modal-actions button{
  flex:1 1 auto;
  min-width:0;
  min-height:40px;
}
.phone-mockup .modal-wrap .modal-actions .primary,
.phone-mockup .modal-wrap .modal-actions .secondary{
  color:#35231b;
  border-color:#d1b89c;
}
.phone-mockup .modal-wrap .modal-actions .primary{
  color:#fff;
  background:#8c211c;
  border-color:#8c211c;
}
/* Delivery ocupa solo el interior útil. Su propio motor controla fichas y cesta
   dentro del iframe ajustado al espacio realmente visible del teléfono. */
#main.delivery-active{
  overflow:hidden;
}
#view-delivery.current{
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
  height:100%;
  min-height:0;
  padding:0;
  overflow:hidden;
}
#view-delivery .delivery-section-heading{
  flex:0 0 auto;
  padding:12px 14px 9px;
}
#view-delivery .delivery-section-heading h1{
  font-size:clamp(19px,3vw,23px);
  line-height:1.1;
  margin:7px 0;
}
#view-delivery .delivery-section-heading p{
  margin:0;
  font-size:11px;
  line-height:1.4;
}
#view-delivery .delivery-frame-wrap{
  box-sizing:border-box;
  flex:1 1 0px;
  display:block;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:hidden;
  margin:0;
  padding:0;
}
#view-delivery .delivery-frame-wrap iframe{
  width:100%;
  height:100%;
  min-height:0;
  border:0;
  display:block;
}
#view-delivery > .disclaimer{
  flex:0 0 auto;
  margin:0;
  max-height:none;
  border-radius:0;
  padding:7px 11px;
  font-size:10px;
  line-height:1.32;
}
@media(max-width:600px){
  .phone-mockup .modal-wrap{inset:100px 0 70px;padding:7px}
}
@media(max-height:720px){
  .phone-mockup .modal-wrap .modal-head{padding:7px 10px}
  .phone-mockup .modal-wrap .modal-body img{max-height:110px}
  .phone-mockup .modal-wrap .modal-body p{font-size:12px}
  #view-delivery .delivery-section-heading{padding:8px 11px}
  #view-delivery .delivery-section-heading p{font-size:10px}
  #view-delivery .delivery-section-heading h1{font-size:18px}
}


/* Carrusel de portada SmartLink Chino: fachada, interior y cocina (no Oído cocina).
   Fundido suave y controles manuales; sin dependencias nuevas. */
.hero-media .hero-slide{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 36%;
  opacity:0;
  transition:opacity 1000ms ease-in-out;
  will-change:opacity;
}
.hero-media .hero-slide.is-active{opacity:1}
.hero-media .hero-slide[data-slide="0"]{object-position:center 43%}
.hero-media .hero-slide[data-slide="1"]{object-position:center 38%}
.hero-media .hero-slide[data-slide="2"]{object-position:center 38%}
.hero-dots{
  position:absolute;
  top:13px;
  right:12px;
  z-index:5;
  display:flex;
  gap:4px;
  padding:4px;
  border-radius:999px;
  background:rgba(11,22,22,.67);
  border:1px solid rgba(244,220,175,.32);
}
.hero-dot{
  appearance:none;
  display:flex;
  align-items:center;
  justify-content:center;
  width:27px;
  height:27px;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  border-radius:50%;
  cursor:pointer;
}
.hero-dot span{
  display:block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:rgba(246,244,237,.63);
  box-shadow:0 0 0 1px rgba(0,0,0,.35);
  transition:background 250ms ease,transform 250ms ease;
}
.hero-dot.is-active span{
  background:#ffe1a7;
  transform:scale(1.35);
}
.hero-dot:focus-visible{
  outline:2px solid #ffe1a7;
  outline-offset:1px;
}
@media(prefers-reduced-motion:reduce){
  .hero-media .hero-slide,
  .hero-dot span{transition:none!important}
}


/* 28/10/2026 — Nombre ficticio definido por Dirección; solo tipografía,
   sin nuevo logotipo ni fuentes descargadas. Usamos fuentes del sistema. */
.head .brand-title{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:1px;
  min-width:0;
  line-height:1.06;
  font-style:normal;
  white-space:normal;
  letter-spacing:0;
  text-shadow:0 1px 1px rgba(0,0,0,.45);
}
.head .brand-title .brand-latin{
  color:#ff7763;
  font-family:"Palatino Linotype","Book Antiqua","Microsoft YaHei","Georgia",serif;
  font-size:clamp(16px,3.8vw,23px);
  font-weight:800;
  font-style:italic;
  line-height:1.12;
  letter-spacing:-.027em;
  white-space:nowrap;
}
.head .brand-title .brand-chinese{
  color:#ff7160;
  font-family:"KaiTi","STKaiti","Microsoft YaHei","Microsoft JhengHei",serif;
  font-weight:750;
  font-style:normal;
  font-size:clamp(17px,4.2vw,24px);
  line-height:1.13;
  letter-spacing:.16em;
  text-shadow:0 1px 1px #0008;
}
.head .brand-small{font-size:9px}
.head .brand-sub{font-size:9px;letter-spacing:.015em}
@media(max-width:350px){
 .head .brand-title .brand-latin{font-size:15.8px}
 .head .brand-title .brand-chinese{font-size:17px}
 .head .brand-small{font-size:8px;letter-spacing:0}
}

/* Cuarta imagen del carrusel: cocina de Sabores de Oriente. */
.hero-media .hero-slide[data-slide="3"]{object-position:center 38%}