/* ============ el maître — rediseño restaurante con efectos ============ */
:root{
  --vino:#7F1D1D; --vino-d:#641414; --vino-l:#9b2c2c;
  --oro:#D4AF37; --oro-d:#b8932b; --oro-l:#e6c84d;
  --carbon:#0A0A0A; --carbon-l:#1a1111;
  --crema:#FAF7F0; --gris:#E7E1D8; --gris-t:#6B7280;
  --wa:#25D366; --wa-d:#1da851;
  --white:#fff; --shadow-lg:0 25px 60px rgba(0,0,0,.15);
  --radius:18px; --transition:.35s cubic-bezier(.4,0,.2,1);
}

/* ============ RESET & BASE ============ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  font-family:'Montserrat',Arial,sans-serif;color:#1f2937;
  background:var(--crema);line-height:1.6;overflow-x:hidden;
}
h1,h2,h3{font-family:'Playfair Display',Georgia,serif;color:var(--carbon);line-height:1.15}
a{text-decoration:none;color:inherit}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px;position:relative;z-index:2}
img{max-width:100%;height:auto;display:block}

/* ============ PRELOADER ============ */
#preloader{
  position:fixed;inset:0;z-index:9999;background:var(--carbon);
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  transition:opacity .6s ease,visibility .6s ease;
}
#preloader.hidden{opacity:0;visibility:hidden;pointer-events:none}
#preloader .loader-ring{
  width:60px;height:60px;border:3px solid rgba(212,175,55,.15);
  border-top-color:var(--oro);border-radius:50%;
  animation:spin .9s linear infinite;
}
#preloader .loader-logo{font-family:'Playfair Display',serif;color:var(--oro);font-size:28px;margin-top:20px;font-weight:800;letter-spacing:1px}

@keyframes spin{to{transform:rotate(360deg)}}

/* ============ PARTICLES ============ */
.particles-container{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1;
}
.particle{
  position:absolute;border-radius:50%;opacity:0;
  animation:floatUp linear infinite;
}
.particle.dot{background:var(--oro);width:4px;height:4px;}
.particle.circle{border:1.5px solid rgba(212,175,55,.3);width:10px;height:10px;}
.particle.ring{border:1px solid rgba(212,175,55,.2);width:16px;height:16px;border-radius:50%;}

@keyframes floatUp{
  0%{transform:translateY(0) translateX(0) scale(0);opacity:0}
  10%{opacity:1}
  90%{opacity:.6}
  100%{transform:translateY(-400px) translateX(60px) scale(1.2);opacity:0}
}

/* ============ REVEAL TEXT ANIMATION ============ */
.reveal-text{
  overflow:hidden;display:inline-block;
}
.reveal-text span{
  display:inline-block;transform:translateY(100%);opacity:0;
  transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .7s ease;
}
.reveal-text.revealed span{transform:translateY(0);opacity:1}

/* ============ SCROLL ANIMATIONS ============ */
.anim-up{
  opacity:0;transform:translateY(50px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1);
}
.anim-up.visible{opacity:1;transform:translateY(0)}

.anim-left{
  opacity:0;transform:translateX(-40px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1);
}
.anim-left.visible{opacity:1;transform:translateX(0)}

.anim-right{
  opacity:0;transform:translateX(40px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1);
}
.anim-right.visible{opacity:1;transform:translateX(0)}

.anim-zoom{
  opacity:0;transform:scale(.85);
  transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1);
}
.anim-zoom.visible{opacity:1;transform:scale(1)}

.anim-stagger > *{opacity:0;transform:translateY(30px);transition:opacity .5s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.anim-stagger.visible > *:nth-child(1){transition-delay:0s;opacity:1;transform:translateY(0)}
.anim-stagger.visible > *:nth-child(2){transition-delay:.12s;opacity:1;transform:translateY(0)}
.anim-stagger.visible > *:nth-child(3){transition-delay:.24s;opacity:1;transform:translateY(0)}
.anim-stagger.visible > *:nth-child(4){transition-delay:.36s;opacity:1;transform:translateY(0)}
.anim-stagger.visible > *:nth-child(5){transition-delay:.48s;opacity:1;transform:translateY(0)}
.anim-stagger.visible > *:nth-child(6){transition-delay:.6s;opacity:1;transform:translateY(0)}

.anim-pop{transition:all var(--transition)}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;gap:8px;padding:15px 30px;
  border-radius:12px;font-weight:700;font-size:15px;cursor:pointer;border:none;
  transition:all var(--transition);position:relative;overflow:hidden;
  letter-spacing:.3px;
}
.btn::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,.2) 50%,transparent 60%);
  transform:translateX(-100%);transition:transform .6s ease;
}
.btn:hover::after{transform:translateX(100%)}
.btn:active{transform:scale(.96)}

.btn-oro{background:linear-gradient(135deg,var(--oro),var(--oro-d));color:var(--carbon);box-shadow:0 8px 25px rgba(212,175,55,.3)}
.btn-oro:hover{box-shadow:0 14px 35px rgba(212,175,55,.45);transform:translateY(-2px)}
.btn-vino{background:linear-gradient(135deg,var(--vino),var(--vino-d));color:var(--white);box-shadow:0 8px 25px rgba(127,29,29,.25)}
.btn-vino:hover{box-shadow:0 14px 35px rgba(127,29,29,.4);transform:translateY(-2px)}
.btn-ghost{border:1.5px solid rgba(255,255,255,.3);color:var(--white);backdrop-filter:blur(4px)}
.btn-ghost:hover{border-color:var(--oro);color:var(--oro);background:rgba(212,175,55,.08)}
.btn-wa{background:linear-gradient(135deg,var(--wa),var(--wa-d));color:var(--white);box-shadow:0 8px 25px rgba(37,211,102,.25)}
.btn-wa:hover{box-shadow:0 14px 35px rgba(37,211,102,.4);transform:translateY(-2px)}

/* PULSE GLOW para CTA principal */
.btn-pulse{
  animation:pulseGlow 2.4s ease-in-out infinite;
}
@keyframes pulseGlow{
  0%,100%{box-shadow:0 8px 25px rgba(212,175,55,.3)}
  50%{box-shadow:0 8px 50px rgba(212,175,55,.6),0 0 80px rgba(212,175,55,.2)}
}

/* ============ NAVIGATION ============ */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(250,247,240,.85);backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--gris);
  transition:all .3s ease;
}
header.scrolled{box-shadow:0 4px 30px rgba(0,0,0,.08)}
nav{display:flex;align-items:center;justify-content:space-between;height:74px}
nav .logo{height:42px;transition:transform .3s}
nav .logo:hover{transform:scale(1.05)}
nav ul{display:flex;gap:28px;list-style:none;font-weight:500;font-size:15px}
nav ul a{position:relative;padding:4px 0}
nav ul a::after{
  content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;
  background:var(--vino);transition:width .3s ease;
}
nav ul a:hover::after,nav ul a.active::after{width:100%}
nav ul a:hover,nav ul a.active{color:var(--vino)}
.nav-cta{display:flex;gap:12px;align-items:center}
.nav-cta .login{font-weight:600;transition:color .3s}
.nav-cta .login:hover{color:var(--vino)}

/* ============ MOBILE MENU ============ */
.menu-toggle{display:none;font-size:24px;background:none;border:none;cursor:pointer;color:var(--carbon);padding:8px;transition:transform .3s}
.menu-toggle.open{transform:rotate(90deg)}
.mobile-menu{
  position:fixed;inset:0;z-index:45;background:rgba(10,10,10,.6);
  backdrop-filter:blur(6px);opacity:0;visibility:hidden;pointer-events:none;
  transition:all .35s ease;
}
.mobile-menu.open{opacity:1;visibility:visible;pointer-events:auto}
.mobile-menu .panel{
  position:absolute;right:0;top:0;bottom:0;width:320px;max-width:85vw;
  background:var(--white);padding:100px 30px 30px;
  transform:translateX(100%);transition:transform .4s cubic-bezier(.22,1,.36,1);
  display:flex;flex-direction:column;gap:12px;
  box-shadow:-10px 0 40px rgba(0,0,0,.15);
}
.mobile-menu.open .panel{transform:translateX(0)}
.mobile-menu .panel a{font-size:18px;font-weight:600;padding:12px 16px;border-radius:10px;transition:all .2s}
.mobile-menu .panel a:hover{background:var(--crema);color:var(--vino)}
.mobile-menu .panel .btn{margin-top:16px;justify-content:center}

/* ============ HERO ============ */
.hero{
  background:linear-gradient(160deg,var(--carbon) 0%,#1a0f0f 30%,#2a1212 65%,var(--vino) 130%);
  color:var(--crema);padding:100px 0 80px;position:relative;overflow:hidden;
}
.hero::before{
  content:'';position:absolute;top:-50%;right:-20%;width:600px;height:600px;
  background:radial-gradient(circle,rgba(212,175,55,.08) 0%,transparent 70%);
  border-radius:50%;pointer-events:none;
}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero .eyebrow{
  font-size:13px;letter-spacing:3px;text-transform:uppercase;color:var(--oro-l);font-weight:700;
  margin-bottom:16px;display:inline-block;
}
.hero h1{color:var(--white);font-size:54px;font-weight:800;line-height:1.08}
.hero h1 em{color:var(--oro);font-style:normal;position:relative}
.hero h1 em::after{
  content:'';position:absolute;bottom:2px;left:0;width:100%;height:3px;
  background:var(--oro);border-radius:2px;opacity:.5;
}
.hero p{font-size:19px;color:#e5ddd1;margin:24px 0 36px;max-width:520px;line-height:1.7}
.hero .cta-row{display:flex;gap:14px;flex-wrap:wrap}
.hero .mockup-wrapper{
  position:relative;display:flex;justify-content:center;align-items:center;
}
.hero .mockup-wrapper img{
  width:100%;max-width:420px;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.5));
  animation:heroFloat 6s ease-in-out infinite;
}
@keyframes heroFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-18px)}
}

/* ============ CHAT SIMULATION (WhatsApp) ============ */
.chat-section{background:var(--white);padding:100px 0;position:relative;overflow:hidden}
.chat-section::before{
  content:'';position:absolute;top:0;left:0;right:0;bottom:0;
  background:radial-gradient(ellipse at 70% 50%,rgba(37,211,102,.03) 0%,transparent 60%);
  pointer-events:none;
}
.chat-grid{display:grid;grid-template-columns:420px 1fr;gap:60px;align-items:start}
.chat-phone{
  background:linear-gradient(145deg,#1a1a1a,#0a0a0a);
  border-radius:36px;padding:12px;max-width:380px;margin:0 auto;
  box-shadow:0 30px 70px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.1);
  position:relative;
  animation:chatFloat 5s ease-in-out infinite;
}
@keyframes chatFloat{
  0%,100%{transform:translateY(0) rotate(0deg)}
  25%{transform:translateY(-8px) rotate(.5deg)}
  75%{transform:translateY(4px) rotate(-.3deg)}
}
.chat-screen{
  background:#e5ddd5;border-radius:26px;overflow:hidden;
  min-height:520px;position:relative;
}
.chat-header-wa{
  background:#075e54;color:var(--white);padding:14px 16px;
  display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;
}
.chat-header-wa .avatar{
  width:36px;height:36px;border-radius:50%;background:var(--oro);
  display:grid;place-items:center;font-size:18px;font-weight:800;color:var(--carbon);
}
.chat-header-wa .sub{font-size:11px;font-weight:400;opacity:.8}
.chat-messages{
  padding:16px;display:flex;flex-direction:column;gap:10px;min-height:400px;
  overflow-y:auto;scrollbar-width:thin;
}
.chat-messages .msg{
  max-width:80%;padding:9px 14px;border-radius:8px;font-size:13px;line-height:1.5;
  position:relative;opacity:0;transform:translateY(10px);
  animation:msgIn .4s ease forwards;
}
.chat-messages .msg.bot{
  background:var(--white);align-self:flex-start;border-top-left-radius:2px;
  color:#303030;
}
.chat-messages .msg.user{
  background:#dcf8c6;align-self:flex-end;border-top-right-radius:2px;
  color:#303030;
}
.chat-messages .msg .time{font-size:10px;color:#999;text-align:right;margin-top:3px}
@keyframes msgIn{
  to{opacity:1;transform:translateY(0)}
}

/* Chat typing indicator */
.typing-indicator{
  display:flex;align-items:center;gap:4px;padding:14px 18px;
  background:var(--white);border-radius:8px;align-self:flex-start;
  border-top-left-radius:2px;max-width:80px;
}
.typing-indicator span{
  width:7px;height:7px;border-radius:50%;background:#bbb;
  animation:typingBounce 1.4s ease-in-out infinite;
}
.typing-indicator span:nth-child(2){animation-delay:.2s}
.typing-indicator span:nth-child(3){animation-delay:.4s}
@keyframes typingBounce{
  0%,60%,100%{transform:translateY(0);opacity:.4}
  30%{transform:translateY(-8px);opacity:1}
}

/* Chat info right side */
.chat-info h2{font-size:38px;margin:0 0 8px}
.chat-info .chip-wa{
  display:inline-flex;align-items:center;gap:8px;
  background:#e7f9ef;color:#0c7a44;padding:6px 14px;
  border-radius:999px;font-weight:700;font-size:13px;margin-bottom:18px;
}
.chip-wa .dot{width:8px;height:8px;border-radius:50%;background:#25D366;animation:pulseDot 1.8s ease infinite}
@keyframes pulseDot{
  0%,100%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}
  50%{box-shadow:0 0 0 8px rgba(37,211,102,0)}
}
.chat-info p{color:var(--gris-t);font-size:17px;margin-bottom:24px;line-height:1.7}
.chat-features{list-style:none;margin-bottom:30px}
.chat-features li{
  padding:10px 0 10px 38px;position:relative;font-size:16px;color:#374151;
}
.chat-features li::before{
  content:'✓';position:absolute;left:0;top:7px;
  width:26px;height:26px;background:var(--vino);color:var(--white);
  border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;
}

/* ============ ORDER TO KITCHEN FLOW ============ */
.order-flow{background:var(--crema);padding:100px 0;position:relative}
.order-flow .section-header{text-align:center;margin-bottom:60px}
.order-flow .section-header .eyebrow{font-size:13px;letter-spacing:3px;text-transform:uppercase;color:var(--oro-d);font-weight:700}
.order-flow .section-header h2{font-size:40px;margin:12px 0}
.order-flow .section-header p{color:var(--gris-t);font-size:18px;max-width:600px;margin:0 auto}

.flow-steps{
  display:flex;align-items:center;justify-content:center;
  gap:0;flex-wrap:wrap;position:relative;
}
.flow-step{
  text-align:center;flex:1;min-width:180px;max-width:240px;
  position:relative;padding:20px;
}
.flow-step .flow-icon{
  width:80px;height:80px;border-radius:50%;
  margin:0 auto 16px;display:grid;place-items:center;font-size:32px;
  position:relative;z-index:2;
  transition:all .4s ease;
}
.flow-step:nth-child(1) .flow-icon{background:linear-gradient(135deg,#e7f9ef,#d4f5e0);color:#25D366}
.flow-step:nth-child(2) .flow-icon{background:linear-gradient(135deg,#fff3e0,#ffe0b2);color:#e65100}
.flow-step:nth-child(3) .flow-icon{background:linear-gradient(135deg,#fce4ec,#f8bbd0);color:var(--vino)}
.flow-step:nth-child(4) .flow-icon{background:linear-gradient(135deg,#e8f5e9,#c8e6c9);color:#2e7d32}

.flow-step:hover .flow-icon{transform:scale(1.15);box-shadow:0 12px 35px rgba(0,0,0,.12)}
.flow-step h4{font-family:'Playfair Display',serif;font-size:20px;margin-bottom:6px}
.flow-step p{color:var(--gris-t);font-size:14px;line-height:1.5}

/* Connector line between flow steps */
.flow-connector{
  width:40px;height:2px;background:linear-gradient(90deg,var(--oro),transparent);
  align-self:center;margin-bottom:40px;position:relative;
}
.flow-connector::after{
  content:'▶';position:absolute;right:-4px;top:-7px;color:var(--oro-d);font-size:10px;
}

/* Animated order particle traveling */
.order-particle{
  position:absolute;width:14px;height:14px;background:var(--oro);
  border-radius:50%;z-index:10;pointer-events:none;
  filter:blur(2px);
  animation:orderTravel 3s ease-in-out infinite;
}
@keyframes orderTravel{
  0%{left:10%;top:45%;transform:scale(.5);opacity:0}
  15%{opacity:1;transform:scale(1.2)}
  40%{left:35%;top:35%;transform:scale(1)}
  65%{left:60%;top:40%;transform:scale(1)}
  85%{left:78%;top:45%;transform:scale(1.1)}
  100%{left:95%;top:45%;transform:scale(.3);opacity:0}
}

/* ============ FEATURES CARDS ============ */
.features{background:var(--crema);padding:100px 0}
.features .section-header{text-align:center;margin-bottom:60px}
.features .section-header .eyebrow{font-size:13px;letter-spacing:3px;text-transform:uppercase;color:var(--oro-d);font-weight:700}
.features .section-header h2{font-size:40px;margin:12px 0}
.features .section-header p{color:var(--gris-t);font-size:18px;max-width:600px;margin:0 auto}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.card{
  background:var(--white);border:1px solid var(--gris);
  border-radius:var(--radius);padding:32px;
  transition:all var(--transition);position:relative;overflow:hidden;
}
.card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--vino),var(--oro));
  transform:scaleX(0);transform-origin:left;transition:transform .5s ease;
}
.card:hover::before{transform:scaleX(1)}
.card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:transparent}
.card .ico{
  width:56px;height:56px;border-radius:14px;
  background:linear-gradient(135deg,#f6efe2,#ede4d2);
  color:var(--vino);display:grid;place-items:center;font-size:26px;
  margin-bottom:18px;transition:transform .3s;
}
.card:hover .ico{transform:scale(1.1) rotate(-5deg)}
.card h3{font-size:22px;margin-bottom:8px}
.card p{color:var(--gris-t);font-size:15px;line-height:1.6}

/* ============ COUNTERS / ESTADÍSTICAS ============ */
.stats{background:var(--vino);padding:60px 0;position:relative;overflow:hidden}
.stats::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 30% 50%,rgba(212,175,55,.08) 0%,transparent 60%);
}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.stat-item{text-align:center;color:var(--white)}
.stat-item .number{
  font-family:'Playfair Display',serif;font-size:48px;font-weight:800;
  color:var(--oro);display:block;line-height:1;
}
.stat-item .label{font-size:15px;color:#e0d0d0;margin-top:8px;font-weight:500}
@keyframes countIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.stat-item.counting{animation:countIn .6s ease forwards}

/* ============ TESTIMONIOS ============ */
.testi{background:var(--crema);padding:100px 0}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.quote{
  background:var(--white);border:1px solid var(--gris);
  border-radius:var(--radius);padding:32px;position:relative;
  transition:all var(--transition);
}
.quote::before{content:'\201C';font-family:'Playfair Display',serif;font-size:60px;color:var(--oro);position:absolute;top:10px;left:20px;line-height:1;opacity:.5}
.quote:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.quote p{font-size:16px;font-style:italic;color:#374151;margin-top:10px;line-height:1.7}
.quote .who{
  margin-top:18px;padding-top:16px;border-top:1px solid var(--gris);
  display:flex;align-items:center;gap:12px;
}
.quote .who .avatar{
  width:44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg,var(--vino),var(--vino-d));
  color:var(--white);display:grid;place-items:center;font-weight:700;font-size:18px;
}
.quote .who strong{color:var(--vino);font-size:14px;display:block}
.quote .who span{color:var(--gris-t);font-size:12px}

/* ============ PRICING ============ */
.pricing{background:var(--white);padding:100px 0}
.toggle{
  display:flex;justify-content:center;gap:12px;align-items:center;
  margin-bottom:40px;font-weight:600;color:var(--gris-t);font-size:15px;
}
.toggle .sw{
  width:56px;height:30px;border-radius:999px;background:var(--gris);
  position:relative;cursor:pointer;transition:.3s;
}
.toggle .sw::after{
  content:'';position:absolute;top:3px;left:3px;
  width:24px;height:24px;border-radius:50%;background:var(--white);
  transition:.3s;box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.toggle.on .sw{background:var(--oro)}
.toggle.on .sw::after{left:29px}
.toggle .on-txt{color:var(--carbon)}

.plans{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;max-width:800px;margin:0 auto}
.plan{
  border:1px solid var(--gris);border-radius:var(--radius);
  padding:36px;background:var(--crema);transition:all var(--transition);
}
.plan:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.plan.pro{border:2px solid var(--oro);background:var(--white);position:relative}
.plan.pro::before{
  content:'';position:absolute;inset:-2px;border-radius:20px;padding:2px;
  background:linear-gradient(135deg,var(--oro),var(--vino));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.plan.pro .tag{
  position:absolute;top:-14px;right:28px;
  background:linear-gradient(135deg,var(--oro),var(--oro-d));
  color:var(--carbon);font-size:12px;font-weight:700;
  padding:5px 14px;border-radius:999px;
  animation:tagPulse 2s ease infinite;
}
@keyframes tagPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.05)}
}
.plan h3{font-size:26px}
.price{font-size:44px;font-family:'Playfair Display',serif;color:var(--vino);font-weight:800;margin:10px 0 4px}
.price small{font-size:15px;color:var(--gris-t);font-weight:400;font-family:'Montserrat'}
.plan ul{list-style:none;margin:24px 0}
.plan li{padding:8px 0 8px 28px;position:relative;font-size:15px}
.plan li::before{content:'✓';position:absolute;left:0;color:var(--oro-d);font-weight:700}
.plan li.no{color:#b9b3a8}
.plan li.no::before{content:'–';color:#b9b3a8}
.plan .btn{width:100%;text-align:center;justify-content:center;margin-top:10px}

.modules{max-width:800px;margin:48px auto 0;background:var(--crema);border:1px solid var(--gris);border-radius:var(--radius);padding:32px}
.modules h4{font-family:'Playfair Display',serif;font-size:21px;margin-bottom:16px}
.mod-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px dashed var(--gris);font-size:15px;transition:.2s}
.mod-row:hover{background:rgba(212,175,55,.04);padding-left:8px;padding-right:8px;border-radius:4px}
.mod-row:last-child{border:none}
.mod-row b{color:var(--vino)}
.star{color:var(--oro-d)}

/* ============ FAQ ============ */
.faq-section{background:var(--crema);padding:100px 0}
.faq{max-width:800px;margin:0 auto}
.faq details{
  background:var(--white);border:1px solid var(--gris);
  border-radius:14px;padding:0;margin-bottom:12px;
  transition:all .3s ease;overflow:hidden;
}
.faq details[open]{box-shadow:0 8px 30px rgba(0,0,0,.06);border-color:var(--oro)}
.faq summary{
  font-weight:700;cursor:pointer;list-style:none;font-size:16px;
  padding:18px 48px 18px 22px;position:relative;transition:color .2s;
}
.faq details[open] summary{color:var(--vino)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'+';position:absolute;right:18px;top:50%;transform:translateY(-50%);
  color:var(--oro-d);font-size:24px;line-height:1;transition:transform .3s;
}
.faq details[open] summary::after{content:'–';transform:translateY(-50%) rotate(180deg)}
.faq p{padding:0 22px 20px;color:var(--gris-t);font-size:15px}

/* ============ CTA FINAL ============ */
.cta-final{
  background:linear-gradient(160deg,var(--carbon) 0%,#1a0f0f 50%,var(--vino) 100%);
  color:var(--white);text-align:center;padding:100px 0;position:relative;overflow:hidden;
}
.cta-final::before{
  content:'';position:absolute;top:-30%;left:50%;transform:translateX(-50%);
  width:700px;height:700px;
  background:radial-gradient(circle,rgba(212,175,55,.06) 0%,transparent 70%);
  border-radius:50%;pointer-events:none;
}
.cta-final h2{color:var(--white);font-size:44px}
.cta-final p{color:#e5ddd1;margin:16px 0 32px;font-size:19px}
.cta-final .cta-buttons{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}

/* ============ FOOTER ============ */
footer{background:var(--carbon);color:#cbb9b9;padding:70px 0 30px;font-size:14px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px;margin-bottom:40px}
footer h5{color:var(--white);font-family:'Playfair Display',serif;font-size:18px;margin-bottom:16px}
footer ul{list-style:none}
footer li{padding:5px 0}
footer a{transition:color .2s}
footer a:hover{color:var(--oro)}
.foot-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;
  gap:10px;color:#8a7a7a;
}

/* ============ PAGE HERO (internas) ============ */
.page-hero{
  background:linear-gradient(160deg,var(--carbon),var(--vino));
  color:var(--white);padding:90px 0;text-align:center;position:relative;overflow:hidden;
}
.page-hero::before{
  content:'';position:absolute;top:-50%;right:-20%;
  width:500px;height:500px;
  background:radial-gradient(circle,rgba(212,175,55,.06) 0%,transparent 70%);
  border-radius:50%;pointer-events:none;
}
.page-hero h1{color:var(--white);font-size:46px}
.page-hero p{color:#e5ddd1;font-size:18px;margin-top:14px;max-width:640px;margin-left:auto;margin-right:auto}
.page-hero .chip-wa{margin-bottom:8px}

/* ============ RESPONSIVE ============ */
@media(max-width:1024px){
  .chat-grid{grid-template-columns:1fr;gap:40px}
  .chat-phone{max-width:340px}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:880px){
  header nav ul,.nav-cta .login{display:none}
  .menu-toggle{display:block}
  .hero{padding:60px 0}
  .hero-grid{grid-template-columns:1fr;text-align:center}
  .hero h1{font-size:36px}
  .hero p{margin-left:auto;margin-right:auto}
  .hero .cta-row{justify-content:center}
  .hero .mockup-wrapper img{max-width:280px;margin:0 auto}
  .page-hero h1{font-size:34px}
  .grid3,.testi-grid{grid-template-columns:1fr}
  .chat-grid{grid-template-columns:1fr}
  .flow-steps{flex-direction:column;gap:12px}
  .flow-connector{display:none}
  .flow-step{max-width:100%}
  .plans{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:480px){
  .stats-grid{grid-template-columns:1fr}
  .stat-item .number{font-size:38px}
  .hero h1{font-size:30px}
  .cta-final h2{font-size:30px}
}

/* ============ SUNAT BAND ============ */
.sunat{
  background:var(--vino);color:var(--white);padding:70px 0;position:relative;overflow:hidden;
}
.sunat::before{
  content:'';position:absolute;top:0;right:0;width:400px;height:400px;
  background:radial-gradient(circle,rgba(212,175,55,.1) 0%,transparent 70%);
  border-radius:50%;pointer-events:none;
}
.sunat .wrap{display:flex;gap:40px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.sunat h2{color:var(--white);font-size:36px;max-width:580px}
.sunat p{color:#f0dede;margin-top:12px;max-width:580px;font-size:16px;line-height:1.6}

/* ============ FEATURE ROWS (internas) ============ */
.feature-row{
  display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;
  padding:50px 0;border-bottom:1px solid var(--gris);
}
.feature-row:last-child{border-bottom:none}
.feature-row.rev .txt{order:2}
.feature-row .media{
  background:var(--white);border:1px solid var(--gris);
  border-radius:var(--radius);min-height:250px;
  display:grid;place-items:center;color:var(--gris-t);
  font-size:15px;padding:20px;transition:all var(--transition);
}
.feature-row .media:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.feature-row h3{font-size:30px;margin-bottom:14px}
.feature-row p{color:var(--gris-t);font-size:16px;line-height:1.7}

@media(max-width:880px){
  .feature-row{grid-template-columns:1fr}
  .feature-row.rev .txt{order:0}
}

/* ============ CONTACT ============ */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.form label{display:block;font-weight:600;font-size:14px;margin:16px 0 6px}
.form input,.form textarea{
  width:100%;padding:14px 16px;border:1px solid var(--gris);
  border-radius:12px;font-family:inherit;font-size:15px;background:var(--white);
  transition:all .3s;
}
.form input:focus,.form textarea:focus{
  outline:none;border-color:var(--oro);box-shadow:0 0 0 3px rgba(212,175,55,.12);
}
.form textarea{min-height:130px;resize:vertical}
.info-box{
  background:var(--white);border:1px solid var(--gris);
  border-radius:var(--radius);padding:32px;
}
.info-box .row{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px dashed var(--gris)}
.info-box .row:last-child{border:none}
.info-box .ico{font-size:22px;color:var(--vino)}

@media(max-width:880px){.contact-grid{grid-template-columns:1fr}}

/* ============ VALUES ============ */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:24px}
.value{
  background:var(--white);border:1px solid var(--gris);
  border-radius:var(--radius);padding:32px;text-align:center;
  transition:all var(--transition);
}
.value:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.value .ico{font-size:36px;margin-bottom:12px}
.value h3{font-size:21px;margin-bottom:8px}
.value p{color:var(--gris-t);font-size:15px}
@media(max-width:880px){.values{grid-template-columns:1fr}}

/* ============ NOSOTROS ============ */
.nosotros-story p{font-size:18px;color:#374151;text-align:center;line-height:1.8;max-width:820px;margin:0 auto}

/* ---- MISIÓN / VISIÓN ---- */
.mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:48px}
.mv-card{
  background:var(--white);border:1px solid var(--gris);
  border-radius:var(--radius);padding:36px;position:relative;overflow:hidden;
  transition:all var(--transition);
}
.mv-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
}
.mv-card.mision::before{background:linear-gradient(90deg,var(--vino),var(--oro))}
.mv-card.vision::before{background:linear-gradient(90deg,var(--oro),var(--vino))}
.mv-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.mv-card .mv-icon{font-size:42px;margin-bottom:14px;display:block}
.mv-card h3{font-size:26px;margin-bottom:10px}
.mv-card p{color:var(--gris-t);font-size:16px;line-height:1.7}

/* ---- TIMELINE ---- */
.timeline-section{background:var(--crema);padding:100px 0;position:relative}
.timeline{position:relative;max-width:800px;margin:0 auto;padding:20px 0}
.timeline::before{
  content:'';position:absolute;left:50%;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,transparent,var(--oro),var(--vino),transparent);
  transform:translateX(-50%);
}
.timeline-item{
  display:flex;align-items:flex-start;margin-bottom:50px;position:relative;
  opacity:0;transform:translateY(30px);
  transition:all .7s cubic-bezier(.22,1,.36,1);
}
.timeline-item.visible{opacity:1;transform:translateY(0)}
.timeline-item:nth-child(odd){flex-direction:row-reverse}
.timeline-item .tl-dot{
  position:absolute;left:50%;top:20px;transform:translate(-50%,-50%);
  width:18px;height:18px;border-radius:50%;background:var(--oro);
  border:3px solid var(--white);box-shadow:0 0 0 3px var(--oro);z-index:2;
  animation:dotGlow 2.5s ease infinite;
}
@keyframes dotGlow{0%,100%{box-shadow:0 0 0 3px var(--oro)}50%{box-shadow:0 0 0 8px rgba(212,175,55,.3)}}
.timeline-item .tl-content{
  width:calc(50% - 40px);background:var(--white);border:1px solid var(--gris);
  border-radius:14px;padding:24px;transition:all var(--transition);
}
.timeline-item .tl-content:hover{transform:translateY(-4px);box-shadow:0 12px 35px rgba(0,0,0,.08)}
.timeline-item .tl-year{
  font-family:'Playfair Display',serif;font-size:14px;color:var(--oro-d);
  font-weight:700;letter-spacing:2px;margin-bottom:6px;
}
.timeline-item .tl-title{font-size:20px;margin-bottom:6px}
.timeline-item .tl-desc{color:var(--gris-t);font-size:14px;line-height:1.6}
@media(max-width:880px){
  .timeline::before{left:24px}
  .timeline-item,.timeline-item:nth-child(odd){flex-direction:row}
  .timeline-item .tl-dot{left:24px}
  .timeline-item .tl-content{width:calc(100% - 70px);margin-left:50px}
}

/* ---- ENHANCED VALUES ---- */
.values-enhanced{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:50px}
.value-card{
  background:var(--white);border:1px solid var(--gris);
  border-radius:var(--radius);padding:36px 28px;text-align:center;
  transition:all var(--transition);position:relative;overflow:hidden;
}
.value-card::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--vino),var(--oro));
  transform:scaleX(0);transform-origin:center;transition:transform .5s ease;
}
.value-card:hover::after{transform:scaleX(1)}
.value-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.value-card .vc-icon{
  width:72px;height:72px;border-radius:50%;margin:0 auto 20px;
  display:grid;place-items:center;font-size:32px;
  transition:transform .4s ease;
}
.value-card:hover .vc-icon{transform:scale(1.1) rotate(-5deg)}
.value-card:nth-child(1) .vc-icon{background:linear-gradient(135deg,#fef3c7,#fde68a)}
.value-card:nth-child(2) .vc-icon{background:linear-gradient(135deg,#fce7f3,#fbcfe8)}
.value-card:nth-child(3) .vc-icon{background:linear-gradient(135deg,#d1fae5,#a7f3d0)}
.value-card h4{font-size:22px;margin-bottom:8px}
.value-card p{color:var(--gris-t);font-size:15px;line-height:1.6}

/* ---- TEAM SECTION ---- */
.team-section{background:var(--white);padding:100px 0}
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:50px}
.team-card{
  text-align:center;transition:all var(--transition);
  padding:20px;border-radius:var(--radius);
}
.team-card:hover{transform:translateY(-8px)}
.team-card .avatar-circle{
  width:100px;height:100px;border-radius:50%;margin:0 auto 16px;
  display:grid;place-items:center;font-size:36px;font-weight:800;
  color:var(--white);position:relative;
  transition:all .4s ease;
}
.team-card:hover .avatar-circle{transform:scale(1.08);box-shadow:0 12px 35px rgba(0,0,0,.2)}
.team-card:nth-child(1) .avatar-circle{background:linear-gradient(135deg,var(--vino),#b91c1c)}
.team-card:nth-child(2) .avatar-circle{background:linear-gradient(135deg,#1e40af,#3b82f6)}
.team-card:nth-child(3) .avatar-circle{background:linear-gradient(135deg,#047857,#10b981)}
.team-card:nth-child(4) .avatar-circle{background:linear-gradient(135deg,#b45309,#f59e0b)}
.team-card .avatar-circle::after{
  content:'';position:absolute;inset:-4px;border-radius:50%;
  border:2px dashed var(--oro);opacity:.4;
  animation:avatarSpin 12s linear infinite;
}
@keyframes avatarSpin{to{transform:rotate(360deg)}}
.team-card .tc-name{font-family:'Playfair Display',serif;font-size:18px;font-weight:700}
.team-card .tc-role{color:var(--vino);font-size:13px;font-weight:600;margin:4px 0}
.team-card .tc-bio{color:var(--gris-t);font-size:13px;line-height:1.5;margin-top:8px}
@media(max-width:880px){.team-grid{grid-template-columns:repeat(2,1fr)}.mv-grid{grid-template-columns:1fr}}
@media(max-width:480px){.team-grid{grid-template-columns:1fr}.values-enhanced{grid-template-columns:1fr}}

/* ---- IMPACT STATS ---- */
.impact-stats{background:linear-gradient(160deg,var(--vino),#4a0e0e);padding:70px 0;position:relative;overflow:hidden}
.impact-stats::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 70% 50%,rgba(212,175,55,.1) 0%,transparent 60%);
}
.impact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.impact-item{text-align:center;color:var(--white);position:relative;z-index:1}
.impact-item .impact-num{
  font-family:'Playfair Display',serif;font-size:50px;font-weight:800;
  color:var(--oro);display:block;line-height:1;
}
.impact-item .impact-label{font-size:15px;color:#e0d0d0;margin-top:8px;font-weight:500}
@media(max-width:880px){.impact-grid{grid-template-columns:repeat(2,1fr)}.impact-item .impact-num{font-size:40px}}
@media(max-width:480px){.impact-grid{grid-template-columns:1fr}}

/* ============================================================
   ANIMATED FEATURE MOCKUPS (funcionalidades.html)
   ============================================================ */

/* ---- 1. POS RÁPIDO (Tablet/Terminal Interface) ---- */
.mock-pos{
  background:linear-gradient(160deg,#1a1a2e,#16213e);border-radius:18px;
  padding:0;overflow:hidden;min-height:380px;position:relative;
  box-shadow:0 20px 50px rgba(0,0,0,.3);
  border:2px solid #2a2a4a;
}
.mock-pos .pos-header{
  background:#0f0f23;padding:12px 16px;
  display:flex;align-items:center;gap:10px;
  border-bottom:1px solid #2a2a4a;
}
.mock-pos .pos-header .dots{display:flex;gap:6px}
.mock-pos .pos-header .dots span{width:10px;height:10px;border-radius:50%}
.mock-pos .pos-header .dots span:nth-child(1){background:#ff5f57}
.mock-pos .pos-header .dots span:nth-child(2){background:#febc2e}
.mock-pos .pos-header .dots span:nth-child(3){background:#28c840}
.mock-pos .pos-title{color:#ccc;font-size:13px;font-weight:600;margin-left:10px}
.mock-pos .pos-body{padding:20px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.mock-pos .tables-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mock-pos .table-card{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:10px;padding:14px 10px;text-align:center;cursor:default;
  transition:all .3s;color:#aaa;font-size:12px;font-weight:600;
}
.mock-pos .table-card:hover{background:rgba(255,255,255,.1)}
.mock-pos .table-card.selected{
  background:rgba(212,175,55,.15);border-color:var(--oro);
  color:var(--oro);box-shadow:0 0 20px rgba(212,175,55,.2);
}
.mock-pos .table-card .tnum{font-size:22px;font-weight:800;margin-bottom:4px}
.mock-pos .table-card .tstatus{font-size:10px;opacity:.7}
.mock-pos .table-card.ocupied{background:rgba(127,29,29,.2);border-color:var(--vino);color:#e57373}
.mock-pos .table-card.ocupied .tstatus{color:#e57373}

.mock-pos .order-panel{position:relative}
.mock-pos .order-ticket{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  border-radius:12px;padding:16px;color:#ddd;
}
.mock-pos .order-ticket h4{color:var(--oro);font-family:'Playfair Display',serif;font-size:16px;margin-bottom:12px}
.mock-pos .order-ticket .item{
  display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px dashed rgba(255,255,255,.08);
  font-size:13px;animation:itemSlideIn .4s ease forwards;opacity:0;
}
.mock-pos .order-ticket .item:nth-child(2){animation-delay:.8s}
.mock-pos .order-ticket .item:nth-child(3){animation-delay:1.2s}
.mock-pos .order-ticket .item:nth-child(4){animation-delay:1.6s}
@keyframes itemSlideIn{from{transform:translateX(-20px);opacity:0}to{transform:translateX(0);opacity:1}}
.mock-pos .order-ticket .total{
  display:flex;justify-content:space-between;margin-top:12px;padding-top:10px;
  border-top:2px solid var(--oro);font-weight:700;color:var(--oro);font-size:16px;
  animation:totalGlow 2s ease-in-out infinite;
}
@keyframes totalGlow{0%,100%{text-shadow:0 0 8px rgba(212,175,55,.4)}50%{text-shadow:0 0 20px rgba(212,175,55,.8)}}
.mock-pos .pos-badge{
  position:absolute;bottom:16px;right:16px;background:#28c840;color:#fff;
  padding:6px 14px;border-radius:8px;font-size:11px;font-weight:700;
  animation:badgePulse 2s ease infinite;
}
@keyframes badgePulse{0%,100%{box-shadow:0 0 0 0 rgba(40,200,64,.4)}50%{box-shadow:0 0 0 12px rgba(40,200,64,0)}}

/* ---- 2. COMPROBANTE SUNAT (Factura Electrónica) ---- */
.mock-sunat{
  background:var(--white);border-radius:18px;padding:28px 32px;
  min-height:380px;position:relative;overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.10);border:1px solid var(--gris);
  font-family:'Montserrat',sans-serif;
}
.mock-sunat::before{
  content:'SUNAT';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-25deg);
  font-size:80px;font-weight:900;color:rgba(127,29,29,.03);pointer-events:none;
  letter-spacing:10px;
}
.mock-sunat .inv-header{
  display:flex;justify-content:space-between;align-items:start;
  margin-bottom:20px;padding-bottom:16px;border-bottom:2px solid var(--vino);
}
.mock-sunat .inv-header .ruc{font-size:12px;color:var(--gris-t)}
.mock-sunat .inv-header .ruc strong{color:var(--carbon);font-size:16px}
.mock-sunat .inv-header .type{
  background:var(--vino);color:var(--white);padding:6px 16px;border-radius:6px;
  font-weight:700;font-size:14px;letter-spacing:1px;
}
.mock-sunat .inv-table{width:100%;margin:16px 0}
.mock-sunat .inv-table th{text-align:left;font-size:11px;color:var(--gris-t);text-transform:uppercase;padding:8px 4px;border-bottom:1px solid var(--gris)}
.mock-sunat .inv-table td{padding:10px 4px;font-size:14px;border-bottom:1px dashed var(--gris)}
.mock-sunat .inv-table td:last-child{text-align:right;font-weight:600}
.mock-sunat .inv-totals{text-align:right;margin-top:12px}
.mock-sunat .inv-totals div{display:flex;justify-content:flex-end;gap:30px;padding:4px 0;font-size:14px}
.mock-sunat .inv-totals .grand{font-size:20px;font-weight:800;color:var(--vino);margin-top:8px;padding-top:8px;border-top:2px solid var(--carbon)}
.mock-sunat .qr-box{
  position:absolute;bottom:20px;right:24px;width:60px;height:60px;
  background:repeating-linear-gradient(0deg,#333 0px,#333 4px,transparent 4px,transparent 8px),
              repeating-linear-gradient(90deg,#333 0px,#333 4px,transparent 4px,transparent 8px);
  opacity:.15;border-radius:4px;
  animation:qrScan 3s ease-in-out infinite;
}
@keyframes qrScan{0%,100%{opacity:.1}50%{opacity:.25}}
.mock-sunat .stamp{
  position:absolute;top:120px;right:30px;
  color:rgba(40,200,64,.8);border:3px solid rgba(40,200,64,.6);
  border-radius:8px;padding:6px 14px;font-weight:800;font-size:16px;
  transform:rotate(-12deg);letter-spacing:2px;
  animation:stampIn .8s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes stampIn{0%{transform:rotate(-12deg) scale(3);opacity:0}100%{transform:rotate(-12deg) scale(1);opacity:1}}

/* ---- 3. DELIVERY Y CATÁLOGO (Phone with food catalog) ---- */
.mock-delivery{
  display:flex;justify-content:center;align-items:center;min-height:380px;
  background:linear-gradient(160deg,#faf7f0,#e8e0d0);border-radius:18px;
  position:relative;overflow:hidden;
}
.mock-delivery .phone{
  width:200px;background:var(--white);border-radius:28px;padding:10px;
  box-shadow:0 20px 50px rgba(0,0,0,.15);
  transform:rotate(-3deg);transition:transform .5s;
}
.mock-delivery .phone:hover{transform:rotate(0deg)}
.mock-delivery .phone-screen{
  background:#f8f9fa;border-radius:20px;overflow:hidden;padding:14px;
}
.mock-delivery .phone-screen .cat-header{
  display:flex;align-items:center;gap:8px;margin-bottom:12px;
}
.mock-delivery .phone-screen .cat-header .back{font-size:18px}
.mock-delivery .phone-screen .cat-header h5{font-size:13px;color:var(--carbon)}
.mock-delivery .food-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mock-delivery .food-card{
  background:var(--white);border-radius:12px;overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.06);transition:transform .3s;
}
.mock-delivery .food-card:hover{transform:translateY(-3px)}
.mock-delivery .food-card .food-img{
  height:60px;background:linear-gradient(135deg,#ffecd2,#fcb69f);
  display:grid;place-items:center;font-size:28px;
}
.mock-delivery .food-card:nth-child(2) .food-img{background:linear-gradient(135deg,#a1c4fd,#c2e9fb)}
.mock-delivery .food-card:nth-child(3) .food-img{background:linear-gradient(135deg,#d4fc79,#96e6a1)}
.mock-delivery .food-card:nth-child(4) .food-img{background:linear-gradient(135deg,#fbc2eb,#a6c1ee)}
.mock-delivery .food-card .food-info{padding:8px}
.mock-delivery .food-card .food-info .name{font-size:10px;font-weight:700;color:var(--carbon)}
.mock-delivery .food-card .food-info .price{font-size:11px;color:var(--vino);font-weight:700;margin-top:2px}
.mock-delivery .cart-float{
  position:absolute;bottom:16px;right:16px;
  background:var(--vino);color:var(--white);width:48px;height:48px;
  border-radius:50%;display:grid;place-items:center;font-size:20px;
  box-shadow:0 6px 20px rgba(127,29,29,.4);
  animation:cartBounce 2s ease infinite;
}
@keyframes cartBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.mock-delivery .cart-count{
  position:absolute;top:-6px;right:-6px;background:var(--oro);color:var(--carbon);
  width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  font-size:10px;font-weight:800;
}
.mock-delivery .scooter{
  position:absolute;bottom:20px;left:-60px;font-size:36px;
  animation:scooterRide 4s ease-in-out infinite;
}
@keyframes scooterRide{
  0%{left:-60px;transform:scaleX(1)}
  45%{left:calc(50% - 18px);transform:scaleX(1)}
  50%{left:calc(50% - 18px);transform:scaleX(1)}
  55%{left:calc(50% - 18px);transform:scaleX(-1)}
  100%{left:110%;transform:scaleX(-1)}
}

/* ---- 4. MONITOR DE COCINA (KDS) ---- */
.mock-kds{
  background:#0d1117;border-radius:18px;padding:0;overflow:hidden;
  min-height:380px;box-shadow:0 20px 50px rgba(0,0,0,.4);
  border:2px solid #1a2332;
}
.mock-kds .kds-header{
  background:#161b22;padding:14px 18px;
  display:flex;justify-content:space-between;align-items:center;
  border-bottom:1px solid #21262d;
}
.mock-kds .kds-header h4{color:#58a6ff;font-size:14px;font-family:'Montserrat',sans-serif;font-weight:600}
.mock-kds .kds-header .time-display{color:#8b949e;font-size:12px;font-family:monospace}
.mock-kds .kds-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#21262d;padding:1px}
.mock-kds .kds-ticket{
  background:#0d1117;padding:14px;position:relative;
  min-height:130px;display:flex;flex-direction:column;gap:6px;
  border-left:3px solid transparent;transition:border-color .5s;
}
.mock-kds .kds-ticket.new{border-left-color:#58a6ff}
.mock-kds .kds-ticket.cooking{border-left-color:#f0883e}
.mock-kds .kds-ticket.ready{border-left-color:#3fb950}
.mock-kds .kds-ticket .order-id{font-family:monospace;font-size:11px;color:#8b949e}
.mock-kds .kds-ticket .order-items{font-size:12px;color:#c9d1d9;line-height:1.5}
.mock-kds .kds-ticket .order-time{
  font-family:monospace;font-size:18px;font-weight:700;margin-top:auto;
}
.mock-kds .kds-ticket.new .order-time{color:#58a6ff}
.mock-kds .kds-ticket.cooking .order-time{color:#f0883e}
.mock-kds .kds-ticket.ready .order-time{color:#3fb950}
.mock-kds .kds-ticket .order-time .timer{
  animation:timerTick 1s steps(1) infinite;
}
@keyframes timerTick{0%,100%{opacity:1}50%{opacity:.4}}
.mock-kds .kds-badge{
  position:absolute;top:8px;right:8px;font-size:8px;color:var(--white);
  padding:2px 8px;border-radius:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
}
.mock-kds .kds-ticket.new .kds-badge{background:#58a6ff}
.mock-kds .kds-ticket.cooking .kds-badge{background:#f0883e}
.mock-kds .kds-ticket.ready .kds-badge{background:#3fb950}
.mock-kds .ticket-pop{animation:ticketPopIn .5s cubic-bezier(.22,1,.36,1)}
@keyframes ticketPopIn{0%{transform:scale(.8);opacity:0}100%{transform:scale(1);opacity:1}}

/* ---- 5. CAJA Y REPORTES (Dashboard) ---- */
.mock-reports{
  background:linear-gradient(160deg,#0f172a,#1e293b);border-radius:18px;
  padding:24px;min-height:380px;position:relative;overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.3);border:1px solid #334155;
}
.mock-reports .dash-header{
  display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;
}
.mock-reports .dash-header h4{color:#e2e8f0;font-size:16px;font-family:'Montserrat',sans-serif}
.mock-reports .dash-header .date{color:#64748b;font-size:12px}
.mock-reports .kpi-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}
.mock-reports .kpi-card{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
  border-radius:12px;padding:16px;transition:all .3s;
}
.mock-reports .kpi-card:hover{background:rgba(255,255,255,.08);border-color:var(--oro);transform:translateY(-3px)}
.mock-reports .kpi-card .kpi-label{font-size:10px;color:#64748b;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px}
.mock-reports .kpi-card .kpi-value{
  font-family:'Playfair Display',serif;font-size:28px;font-weight:800;color:var(--white);
}
.mock-reports .kpi-card:nth-child(1) .kpi-value{color:var(--oro)}
.mock-reports .kpi-card:nth-child(2) .kpi-value{color:#38bdf8}
.mock-reports .kpi-card:nth-child(3) .kpi-value{color:#4ade80}

.mock-reports .chart-area{display:flex;align-items:flex-end;gap:8px;height:120px;padding:10px 0}
.mock-reports .bar-group{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px}
.mock-reports .bar{
  width:100%;max-width:40px;border-radius:6px 6px 0 0;
  background:linear-gradient(180deg,var(--oro),var(--oro-d));
  transition:height .8s cubic-bezier(.22,1,.36,1);position:relative;
  min-height:20px;
}
.mock-reports .bar-group:nth-child(2) .bar{background:linear-gradient(180deg,var(--vino),var(--vino-d))}
.mock-reports .bar-group:nth-child(3) .bar{background:linear-gradient(180deg,#38bdf8,#0284c7)}
.mock-reports .bar-group:nth-child(4) .bar{background:linear-gradient(180deg,var(--oro),var(--oro-d))}
.mock-reports .bar-group:nth-child(5) .bar{background:linear-gradient(180deg,#4ade80,#16a34a)}
.mock-reports .bar-group:nth-child(6) .bar{background:linear-gradient(180deg,var(--vino),var(--vino-d))}
.mock-reports .bar-group:nth-child(7) .bar{background:linear-gradient(180deg,#38bdf8,#0284c7)}
.mock-reports .bar-label{font-size:10px;color:#64748b}
.mock-reports .bar-group .bar-value{
  position:absolute;top:-18px;left:50%;transform:translateX(-50%);
  font-size:10px;color:var(--white);font-weight:700;opacity:0;
  animation:barValueShow 2s ease forwards;
  animation-delay:calc(var(--i) * .15s);
}
@keyframes barValueShow{0%{opacity:0;top:0}100%{opacity:1;top:-18px}}

.mock-reports .live-dot{
  display:inline-block;width:8px;height:8px;border-radius:50%;background:#4ade80;
  margin-right:6px;animation:livePulse 1.5s ease infinite;
}
@keyframes livePulse{0%,100%{box-shadow:0 0 0 0 rgba(74,222,128,.5)}50%{box-shadow:0 0 0 10px rgba(74,222,128,0)}}

/* ---- 6. APP ANDROID + IMPRESORA ---- */
.mock-android{
  display:flex;justify-content:center;align-items:center;gap:30px;
  min-height:380px;background:linear-gradient(160deg,#f0f9ff,#e0f2fe);
  border-radius:18px;position:relative;overflow:hidden;padding:30px;
}
.mock-android .android-phone{
  width:150px;background:#1a1a2e;border-radius:24px;padding:8px;
  box-shadow:0 20px 50px rgba(0,0,0,.2);
  animation:phoneFloat 4s ease-in-out infinite;
}
@keyframes phoneFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.mock-android .android-screen{
  background:#fff;border-radius:18px;overflow:hidden;padding:14px;
  min-height:240px;
}
.mock-android .android-screen .app-bar{
  background:var(--vino);margin:-14px -14px 12px;padding:12px 14px;
  color:var(--white);font-size:11px;font-weight:700;display:flex;align-items:center;gap:6px;
}
.mock-android .android-screen .mini-order{
  background:#f8f9fa;border-radius:8px;padding:10px;margin-bottom:8px;
  font-size:10px;display:flex;justify-content:space-between;
}
.mock-android .android-screen .mini-btn{
  background:var(--oro);color:var(--carbon);text-align:center;
  padding:8px;border-radius:8px;font-size:10px;font-weight:800;
  margin-top:8px;animation:btnTap 2s ease infinite;
}
@keyframes btnTap{0%,100%{transform:scale(1)}50%{transform:scale(.95)}}

.mock-android .printer{
  background:#e8e8e8;border-radius:14px;padding:16px;width:130px;
  box-shadow:0 10px 30px rgba(0,0,0,.1);position:relative;
}
.mock-android .printer .printer-top{
  background:#ccc;height:30px;border-radius:8px 8px 0 0;margin-bottom:10px;
  position:relative;overflow:hidden;
}
.mock-android .printer .printer-slot{
  background:#999;height:6px;margin:8px 0;border-radius:3px;
}
.mock-android .printer .paper-out{
  background:var(--white);width:90px;height:0;margin:0 auto;
  overflow:hidden;transition:height 3s ease;
  animation:paperPrint 3s ease-in-out infinite;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}
.mock-android .printer .paper-out .receipt-line{
  height:3px;background:#e0e0e0;margin:4px 0;border-radius:1px;
}
.mock-android .printer .paper-out .receipt-line.short{width:60%}
.mock-android .printer .paper-out .receipt-line.bold{height:4px;background:#333;width:90%}
@keyframes paperPrint{
  0%{height:0}
  40%{height:120px}
  60%{height:120px}
  100%{height:0}
}
.mock-android .printer .led{
  width:6px;height:6px;border-radius:50%;background:#4ade80;
  position:absolute;top:10px;right:10px;
  animation:ledBlink 1s step-end infinite;
}
@keyframes ledBlink{0%,100%{opacity:1}50%{opacity:.2}}

/* ---- PRINTER PAPER TEAR (at bottom of phone area) ---- */
.mock-android .paper-trail{
  position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);
  width:80px;height:40px;background:var(--white);
  border-radius:0 0 4px 4px;box-shadow:0 4px 12px rgba(0,0,0,.1);
  animation:trailWiggle 3s ease-in-out infinite;
  z-index:0;
}
@keyframes trailWiggle{0%,100%{transform:translateX(-50%) rotate(0)}25%{transform:translateX(-48%) rotate(1deg)}75%{transform:translateX(-52%) rotate(-1deg)}}

/* RESPONSIVE for mockups */
@media(max-width:880px){
  .mock-pos .pos-body{grid-template-columns:1fr}
  .mock-pos .tables-grid{grid-template-columns:repeat(4,1fr)}
  .mock-kds .kds-grid{grid-template-columns:repeat(2,1fr)}
  .mock-reports .kpi-row{grid-template-columns:1fr}
  .mock-delivery .phone{width:170px}
  .mock-android{flex-direction:column;gap:20px}
}

/* ============================================================
   NEW LANDING MOCKUPS (index.html + precios.html)
   ============================================================ */

/* ---- BUSINESS TYPES (POS interactivo con touch) ---- */
.mock-business{
  min-height:420px;border-radius:20px;position:relative;overflow:hidden;
  display:flex;justify-content:center;align-items:center;
  background:linear-gradient(160deg,#1a1a2e,#0f0f1e);
  box-shadow:inset 0 0 80px rgba(0,0,0,.4),0 25px 60px rgba(0,0,0,.35);
  border:2px solid #2a2a4a;
}
.mock-business .pos-terminal{
  width:340px;background:#0d0d1a;border-radius:16px;overflow:hidden;
  border:2px solid #1e1e3a;position:relative;
  box-shadow:0 0 0 6px #111,0 0 0 10px #1a1a2e;
}
.mock-business .pos-terminal .term-header{
  background:#080812;padding:10px 14px;display:flex;align-items:center;gap:8px;
  border-bottom:1px solid #1a1a30;
}
.mock-business .pos-terminal .term-header .led{width:7px;height:7px;border-radius:50%;background:#4ade80;animation:ledBlink 2s step-end infinite}
.mock-business .pos-terminal .term-header .title{color:#888;font-size:11px;font-weight:600;flex:1}
.mock-business .pos-terminal .term-header .tabs{display:flex;gap:4px}
.mock-business .pos-terminal .term-header .tab{
  padding:4px 10px;border-radius:6px;font-size:10px;font-weight:700;cursor:pointer;
  background:rgba(255,255,255,.05);color:#666;transition:all .3s;
}
.mock-business .pos-terminal .term-header .tab.active{background:var(--vino);color:#fff;box-shadow:0 0 12px rgba(127,29,29,.5)}
.mock-business .pos-terminal .term-header .tab:nth-child(2).active{background:var(--oro);color:var(--carbon);box-shadow:0 0 12px rgba(212,175,55,.5)}
.mock-business .pos-terminal .term-header .tab:nth-child(3).active{background:#3b82f6;color:#fff;box-shadow:0 0 12px rgba(59,130,246,.5)}
.mock-business .pos-terminal .term-screen{
  background:#12122a;padding:16px;min-height:320px;position:relative;
}
/* Screen grid */
.mock-business .pos-terminal .tbl-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px;
}
.mock-business .pos-terminal .tbl-btn{
  background:rgba(255,255,255,.04);border:2px solid rgba(255,255,255,.06);
  border-radius:12px;padding:14px 6px;text-align:center;color:#777;
  font-size:11px;font-weight:700;transition:all .3s;position:relative;overflow:hidden;
  cursor:pointer;
}
.mock-business .pos-terminal .tbl-btn:hover{background:rgba(255,255,255,.08)}
.mock-business .pos-terminal .tbl-btn.tapped{
  background:rgba(212,175,55,.15);border-color:var(--oro);color:var(--oro);
  box-shadow:0 0 20px rgba(212,175,55,.25);
}
.mock-business .pos-terminal .tbl-btn .tbl-num{font-size:20px;display:block;margin-bottom:3px}
/* Touch ripple effect */
.mock-business .pos-terminal .tbl-btn .ripple{
  position:absolute;border-radius:50%;background:rgba(212,175,55,.5);
  transform:scale(0);animation:rippleOut .6s ease-out forwards;
  pointer-events:none;
}
@keyframes rippleOut{to{transform:scale(4);opacity:0}}
/* Finger cursor */
.mock-business .pos-terminal .finger{
  position:absolute;width:28px;height:28px;background:rgba(255,255,255,.9);
  border-radius:50% 50% 50% 30%;z-index:20;pointer-events:none;
  box-shadow:0 4px 15px rgba(0,0,0,.4);transition:none;
  animation:fingerTap 3.6s ease-in-out infinite;
}
@keyframes fingerTap{
  0%,100%{top:60px;left:40px;transform:scale(1);opacity:0}
  5%,12%{top:60px;left:40px;transform:scale(1.2);opacity:1}
  13%,22%{opacity:0}
  23%,30%{top:60px;left:115px;transform:scale(1.2);opacity:1}
  31%,40%{opacity:0}
  41%,48%{top:140px;left:200px;transform:scale(1.2);opacity:1}
  49%,58%{opacity:0}
  59%,66%{top:200px;left:280px;transform:scale(1.2);opacity:1}
  67%,80%{opacity:0}
  81%,88%{top:260px;left:60px;transform:scale(1.2);opacity:1}
  89%,100%{opacity:0}
}
/* Order panel at bottom */
.mock-business .pos-terminal .order-strip{
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);
  border-radius:10px;padding:12px;margin-top:12px;
}
.mock-business .pos-terminal .order-strip .os-row{
  display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#aaa;
  padding:4px 0;
}
.mock-business .pos-terminal .order-strip .os-row.item{animation:osSlide .5s ease forwards;opacity:0}
.mock-business .pos-terminal .order-strip .os-row.item:nth-child(2){animation-delay:.8s}
.mock-business .pos-terminal .order-strip .os-row.item:nth-child(3){animation-delay:1.1s}
@keyframes osSlide{from{transform:translateX(-16px);opacity:0}to{transform:translateX(0);opacity:1}}
.mock-business .pos-terminal .order-strip .os-total{
  border-top:2px solid var(--oro);margin-top:6px;padding-top:8px;
  font-weight:800;color:var(--oro);font-size:15px;
  animation:totalGlow 2s ease-in-out infinite;
}
/* Bottom CTA button on screen */
.mock-business .pos-terminal .screen-btn{
  background:linear-gradient(135deg,var(--oro),var(--oro-d));color:var(--carbon);
  text-align:center;padding:10px;border-radius:10px;font-weight:800;font-size:13px;
  margin-top:12px;animation:screenBtnPulse 2.5s ease infinite;
}
@keyframes screenBtnPulse{0%,100%{box-shadow:0 0 0 0 rgba(212,175,55,.3)}50%{box-shadow:0 0 25px 5px rgba(212,175,55,.25)}}
/* Status bar at bottom */
.mock-business .pos-terminal .term-footer{
  background:#080812;padding:6px 14px;display:flex;align-items:center;justify-content:space-between;
  border-top:1px solid #1a1a30;font-size:10px;color:#555;
}
.mock-business .pos-terminal .term-footer .status-dot{width:6px;height:6px;border-radius:50%;background:#4ade80;display:inline-block;margin-right:6px}

/* ---- SALES CHANNELS (Online store / QR / Apps) ---- */
.mock-channels{
  display:flex;justify-content:center;align-items:center;gap:18px;
  min-height:380px;background:linear-gradient(160deg,#faf7f0,#e8e0d0);
  border-radius:18px;padding:30px;flex-wrap:wrap;position:relative;overflow:hidden;
}
.mock-channels .ch-card{
  background:var(--white);border-radius:14px;padding:20px;text-align:center;
  width:130px;box-shadow:0 8px 25px rgba(0,0,0,.06);
  transition:all var(--transition);border:1px solid var(--gris);
}
.mock-channels .ch-card:hover{transform:translateY(-10px);box-shadow:var(--shadow-lg);border-color:var(--oro)}
.mock-channels .ch-card .ch-icon{
  width:50px;height:50px;border-radius:12px;margin:0 auto 10px;
  display:grid;place-items:center;font-size:22px;
}
.mock-channels .ch-card:nth-child(1) .ch-icon{background:linear-gradient(135deg,#dbeafe,#bfdbfe)}
.mock-channels .ch-card:nth-child(2) .ch-icon{background:linear-gradient(135deg,#fef3c7,#fde68a)}
.mock-channels .ch-card:nth-child(3) .ch-icon{background:linear-gradient(135deg,#fce7f3,#fbcfe8)}
.mock-channels .ch-card:nth-child(4) .ch-icon{background:linear-gradient(135deg,#d1fae5,#a7f3d0)}
.mock-channels .ch-card:nth-child(5) .ch-icon{background:linear-gradient(135deg,#e0e7ff,#c7d2fe)}
.mock-channels .ch-card .ch-name{font-size:12px;font-weight:700;color:var(--carbon)}
.mock-channels .ch-card .ch-desc{font-size:10px;color:var(--gris-t);margin-top:4px;line-height:1.3}
.mock-channels .ch-pulse{
  position:absolute;width:120px;height:120px;border-radius:50%;
  border:1px solid var(--oro);opacity:0;pointer-events:none;
  animation:chExpand 3s ease-out infinite;
}
@keyframes chExpand{0%{transform:scale(.5);opacity:.5}100%{transform:scale(3);opacity:0}}

/* ---- RESULTS DASHBOARD (insights / data) ---- */
.mock-results{
  background:linear-gradient(160deg,#0f172a,#1e293b);border-radius:18px;
  padding:28px;min-height:380px;position:relative;overflow:hidden;
  border:1px solid #334155;
}
.mock-results .res-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.mock-results .res-header h4{color:#e2e8f0;font-size:16px;display:flex;align-items:center;gap:8px}
.mock-results .res-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mock-results .res-card{
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
  border-radius:12px;padding:18px;transition:all .3s;
}
.mock-results .res-card:hover{background:rgba(255,255,255,.06);border-color:var(--oro)}
.mock-results .res-card .res-label{font-size:10px;color:#64748b;text-transform:uppercase;letter-spacing:1px}
.mock-results .res-card .res-value{
  font-family:'Playfair Display',serif;font-size:30px;font-weight:800;margin:4px 0;
}
.mock-results .res-card:nth-child(1) .res-value{color:var(--oro)}
.mock-results .res-card:nth-child(2) .res-value{color:#38bdf8}
.mock-results .res-card:nth-child(3) .res-value{color:#4ade80}
.mock-results .res-card:nth-child(4) .res-value{color:#f59e0b}
.mock-results .res-card .res-trend{
  font-size:11px;display:flex;align-items:center;gap:4px;
}
.mock-results .res-trend.up{color:#4ade80}
.mock-results .res-trend.down{color:#f87171}
.mock-results .res-insight{
  position:absolute;bottom:20px;right:20px;
  background:rgba(212,175,55,.1);border:1px solid rgba(212,175,55,.2);
  border-radius:10px;padding:10px 16px;color:var(--oro);font-size:12px;
  font-weight:600;animation:insightPulse 3s ease infinite;
}
@keyframes insightPulse{0%,100%{box-shadow:0 0 0 0 rgba(212,175,55,.15)}50%{box-shadow:0 0 20px 6px rgba(212,175,55,.08)}}

/* ---- MOBILE ORDERING (tablet / smartphone) ---- */
.mock-mobile-ordering{
  display:flex;justify-content:center;align-items:center;gap:24px;
  min-height:380px;background:linear-gradient(160deg,#f8fafc,#e2e8f0);
  border-radius:18px;padding:30px;position:relative;overflow:hidden;
}
.mock-mobile-ordering .device{
  background:var(--carbon);border-radius:24px;padding:10px;
  box-shadow:0 20px 50px rgba(0,0,0,.2);
  transition:all .5s;
}
.mock-mobile-ordering .device.tablet{width:180px;animation:deviceFloat 5s ease-in-out infinite}
.mock-mobile-ordering .device.phone{width:110px;animation:deviceFloat 5s ease-in-out infinite;animation-delay:1s}
@keyframes deviceFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.mock-mobile-ordering .device-screen{
  background:var(--white);border-radius:16px;overflow:hidden;padding:14px;
}
.mock-mobile-ordering .device-screen .app-top{
  background:var(--vino);color:var(--white);padding:10px;margin:-14px -14px 10px;
  font-size:10px;font-weight:700;display:flex;align-items:center;gap:6px;
}
.mock-mobile-ordering .device-screen .table-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:4px;
}
.mock-mobile-ordering .device-screen .t-cell{
  background:#f1f5f9;border-radius:6px;padding:8px 4px;text-align:center;
  font-size:9px;font-weight:600;color:#64748b;transition:all .3s;
}
.mock-mobile-ordering .device-screen .t-cell.active{
  background:var(--vino);color:var(--white);box-shadow:0 0 12px rgba(127,29,29,.4);
}
.mock-mobile-ordering .device-screen .t-cell .t-num{font-size:14px;display:block}
.mock-mobile-ordering .sync-line{
  position:absolute;top:50%;height:2px;width:60px;
  background:linear-gradient(90deg,transparent,var(--oro),transparent);
  animation:syncPulse 2s ease infinite;
}
@keyframes syncPulse{0%,100%{opacity:.3;width:40px}50%{opacity:1;width:70px}}
.mock-mobile-ordering .order-notif{
  position:absolute;top:20px;right:30px;background:var(--vino);color:var(--white);
  padding:8px 14px;border-radius:20px;font-size:11px;font-weight:700;
  animation:notifSlide 3s ease infinite;
  box-shadow:0 6px 20px rgba(127,29,29,.3);
}
@keyframes notifSlide{0%,90%,100%{transform:translateX(120%);opacity:0}10%,80%{transform:translateX(0);opacity:1}}

/* ---- MODULE CARDS for precios.html ---- */
.module-card{
  background:var(--white);border:1px solid var(--gris);
  border-radius:var(--radius);padding:0;overflow:hidden;
  transition:all var(--transition);position:relative;
}
.module-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--oro)}
.module-card .mod-top{
  padding:22px 28px 8px;position:relative;
}
.module-card .mod-price{
  font-family:'Playfair Display',serif;font-size:26px;font-weight:800;color:var(--vino);
}
.module-card .mod-price small{font-size:13px;font-weight:400;color:var(--gris-t);font-family:'Montserrat'}
.module-card .mod-body{padding:0 28px 24px}
.module-card .mod-body ul{list-style:none}
.module-card .mod-body li{
  padding:6px 0 6px 22px;position:relative;font-size:14px;color:#374151;
}
.module-card .mod-body li::before{
  content:'✓';position:absolute;left:0;color:var(--oro-d);font-weight:700;font-size:12px;
}
.module-card .mod-tag{
  position:absolute;top:-10px;left:24px;
  background:linear-gradient(135deg,var(--oro),var(--oro-d));
  color:var(--carbon);font-size:10px;font-weight:800;
  padding:3px 10px;border-radius:999px;letter-spacing:.5px;
  animation:tagPulse 2s ease infinite;
}
.module-card .mod-badge{
  display:inline-block;font-size:11px;font-weight:600;color:var(--vino);
  background:rgba(127,29,29,.08);padding:4px 10px;border-radius:6px;
  margin-top:10px;
}

/* NEW MODULES GRID for precios.html */
.modules-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:50px}
@media(max-width:880px){.modules-grid{grid-template-columns:1fr}}
@media(min-width:881px) and (max-width:1100px){.modules-grid{grid-template-columns:repeat(2,1fr)}}

/* ---- PRICING CARDS with hero ---- */
.pricing-hero-section{background:var(--white);padding:0 0 80px}
.pricing-hero-section .section-header{margin-bottom:50px}

/* ---- PLAN COMPARISON ---- */
.plan-compare{display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:850px;margin:0 auto}
.plan-compare .plan-card{
  border:1px solid var(--gris);border-radius:var(--radius);
  padding:36px;transition:all var(--transition);position:relative;
}
.plan-compare .plan-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.plan-compare .plan-card.featured{
  border:2px solid var(--oro);background:linear-gradient(180deg,var(--white),#fffdf5);
}
.plan-compare .plan-card.featured::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--oro),var(--vino));
}
.plan-compare .plan-card .plan-tag{
  position:absolute;top:-14px;right:28px;
  background:linear-gradient(135deg,var(--oro),var(--oro-d));
  color:var(--carbon);font-size:12px;font-weight:700;
  padding:5px 14px;border-radius:999px;
  animation:tagPulse 2s ease infinite;
}
.plan-compare .plan-card h3{font-size:26px}
.plan-compare .plan-card .plan-price{
  font-size:44px;font-family:'Playfair Display',serif;color:var(--vino);font-weight:800;margin:10px 0 4px;
}
.plan-compare .plan-card .plan-price small{font-size:15px;color:var(--gris-t);font-weight:400;font-family:'Montserrat'}
.plan-compare .plan-card .plan-desc{color:var(--gris-t);font-size:14px;margin-bottom:20px;line-height:1.5}
.plan-compare .plan-card ul{list-style:none;margin-bottom:24px}
.plan-compare .plan-card li{padding:8px 0 8px 28px;position:relative;font-size:15px}
.plan-compare .plan-card li::before{content:'✓';position:absolute;left:0;color:var(--oro-d);font-weight:700}
.plan-compare .plan-card .btn{width:100%;justify-content:center}
@media(max-width:880px){.plan-compare{grid-template-columns:1fr}}

/* ============================================================
   MODULE PREVIEW ANIMATIONS (precios.html)
   Each module card now has a live mini-mockup area
   ============================================================ */

.mod-preview{
  border-radius:12px;overflow:hidden;margin-bottom:16px;
  position:relative;height:150px;
}
.mod-preview.mesa-prev{
  background:linear-gradient(160deg,#1e293b,#0f172a);
  display:flex;align-items:center;justify-content:center;
}
.mod-preview .floor-plan{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:16px;
  width:100%;max-width:200px;
}
.mod-preview .floor-plan .fp-table{
  aspect-ratio:1;border-radius:8px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);display:grid;place-items:center;
  font-size:11px;font-weight:700;color:#64748b;transition:all .4s;
  position:relative;
}
.mod-preview .floor-plan .fp-table.occupied{
  background:rgba(127,29,29,.3);border-color:var(--vino);color:#e57373;
}
.mod-preview .floor-plan .fp-table.selected{
  background:rgba(212,175,55,.2);border-color:var(--oro);color:var(--oro);
  box-shadow:0 0 20px rgba(212,175,55,.25);
  animation:tableSelect 2.5s ease infinite;
}
@keyframes tableSelect{
  0%,100%{transform:scale(1);box-shadow:0 0 20px rgba(212,175,55,.25)}
  50%{transform:scale(1.1);box-shadow:0 0 35px rgba(212,175,55,.45)}
}
.mod-preview .floor-plan .fp-table .fp-dot{
  position:absolute;top:-4px;right:-4px;width:8px;height:8px;border-radius:50%;
  background:var(--oro);animation:fpDotPulse 1.5s ease infinite;
}
@keyframes fpDotPulse{0%,100%{opacity:1}50%{opacity:.3}}

/* Delivery Apps pipe */
.mod-preview.delivery-prev{
  background:linear-gradient(160deg,#0f172a,#1e293b);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
}
.mod-preview .pipe-track{
  display:flex;align-items:center;gap:0;background:rgba(255,255,255,.05);
  border-radius:6px;overflow:hidden;width:90%;
}
.mod-preview .pipe-track .pipe-stage{
  flex:1;text-align:center;padding:8px 4px;font-size:9px;font-weight:700;
  color:#555;position:relative;transition:all .5s;
}
.mod-preview .pipe-track .pipe-stage.active{color:var(--white);background:rgba(212,175,55,.15)}
.mod-preview .pipe-track .pipe-stage.done{color:var(--oro)}
.mod-preview .pipe-stage-indicator{
  height:2px;background:rgba(255,255,255,.1);width:90%;position:relative;
}
.mod-preview .pipe-stage-indicator::after{
  content:'';position:absolute;left:0;top:0;height:2px;
  background:var(--oro);width:65%;
  animation:pipeProgress 3s ease-in-out infinite;
}
@keyframes pipeProgress{0%,100%{width:30%}50%{width:75%}}
.mod-preview .scooter-icon{
  position:absolute;top:-14px;font-size:16px;
  animation:scooterSlide 3s ease-in-out infinite;
}
@keyframes scooterSlide{0%{left:25%;transform:scaleX(1)}49%{left:65%;transform:scaleX(1)}51%{left:65%;transform:scaleX(-1)}100%{left:25%;transform:scaleX(-1)}}

/* Comensal preview */
.mod-preview.comensal-prev{
  background:linear-gradient(160deg,#faf7f0,#f0ebe0);
  display:flex;align-items:center;justify-content:center;gap:10px;
}
.mod-preview .com-table{
  background:var(--white);border-radius:50%;width:90px;height:90px;
  display:grid;place-items:center;font-size:10px;font-weight:700;
  color:var(--vino);box-shadow:0 4px 15px rgba(0,0,0,.06);
  position:relative;
}
.mod-preview .com-table::before{
  content:'Mesa 4';font-size:11px;
}
.mod-preview .com-person{
  width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;font-weight:800;font-size:14px;
  color:var(--white);position:absolute;
}
.mod-preview .com-person:nth-child(2){
  background:var(--vino);top:-10px;left:-15px;
  animation:comBounce 2s ease infinite;
}
.mod-preview .com-person:nth-child(3){
  background:var(--oro);color:var(--carbon);top:-10px;right:-15px;
  animation:comBounce 2s ease infinite .3s;
}
.mod-preview .com-person:nth-child(4){
  background:#3b82f6;bottom:-10px;left:50%;transform:translateX(-50%);
  animation:comBounce 2s ease infinite .6s;
}
@keyframes comBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.mod-preview .com-bill{
  background:var(--white);border:1px solid var(--gris);border-radius:8px;
  padding:6px 10px;font-size:9px;color:var(--vino);font-weight:700;
  position:absolute;box-shadow:0 4px 12px rgba(0,0,0,.08);
  animation:billPop 3s ease infinite;
}
@keyframes billPop{0%,100%{opacity:0;transform:scale(.8)}20%,60%{opacity:1;transform:scale(1)}}

/* Recepcionista IA */
.mod-preview.ia-prev{
  background:linear-gradient(160deg,#e5ddd5,#d5cfc5);
  padding:12px;display:flex;flex-direction:column;gap:6px;
}
.mod-preview .ia-chat-bubble{
  max-width:85%;padding:8px 12px;border-radius:8px;font-size:10px;
  line-height:1.4;opacity:0;transform:translateY(6px);
  animation:iaBubbleIn .6s ease forwards;
}
.mod-preview .ia-chat-bubble.customer{
  background:var(--white);align-self:flex-start;border-top-left-radius:2px;
  animation-delay:.2s;
}
.mod-preview .ia-chat-bubble.bot{
  background:#dcf8c6;align-self:flex-end;border-top-right-radius:2px;
  animation-delay:.8s;
}
.mod-preview .ia-chat-bubble.bot2{
  background:#dcf8c6;align-self:flex-end;border-top-right-radius:2px;
  animation-delay:1.5s;
}
.mod-preview .ia-chat-bubble.customer2{
  background:var(--white);align-self:flex-start;border-top-left-radius:2px;
  animation-delay:2.2s;
}
@keyframes iaBubbleIn{to{opacity:1;transform:translateY(0)}}

/* KDS Monitor preview */
.mod-preview.kds-prev{
  background:#0d1117;padding:6px;
  display:grid;grid-template-columns:1fr 1fr;gap:4px;height:150px;
}
.mod-preview .kds-mini-ticket{
  background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);
  border-radius:6px;padding:8px;display:flex;flex-direction:column;gap:2px;
  border-left:3px solid transparent;transition:all .6s;
}
.mod-preview .kds-mini-ticket:nth-child(1){border-left-color:#58a6ff}
.mod-preview .kds-mini-ticket:nth-child(2){border-left-color:#f0883e}
.mod-preview .kds-mini-ticket:nth-child(3){border-left-color:#3fb950}
.mod-preview .kds-mini-ticket:nth-child(4){border-left-color:#f0883e}
.mod-preview .kds-mini-ticket .kmt-id{font-size:8px;color:#555;font-family:monospace}
.mod-preview .kds-mini-ticket .kmt-item{font-size:9px;color:#aaa;line-height:1.3}
.mod-preview .kds-mini-ticket .kmt-time{
  font-size:12px;font-weight:700;margin-top:auto;font-family:monospace;
}
.mod-preview .kds-mini-ticket:nth-child(1) .kmt-time{color:#58a6ff}
.mod-preview .kds-mini-ticket:nth-child(2) .kmt-time{color:#f0883e}
.mod-preview .kds-mini-ticket:nth-child(3) .kmt-time{color:#3fb950}
.mod-preview .kds-mini-ticket:nth-child(4) .kmt-time{color:#f0883e}
.mod-preview .kds-mini-ticket .kmt-timer{animation:timerTick 1s steps(1) infinite}
.mod-preview .kds-mini-ticket.flash{animation:kdsFlash .8s ease}
@keyframes kdsFlash{0%{background:rgba(88,166,255,.15)}100%{background:rgba(255,255,255,.02)}}

/* Tu Delivery preview */
.mod-preview.delivery2-prev{
  background:linear-gradient(160deg,#f8fafc,#e2e8f0);
  display:flex;align-items:center;justify-content:center;gap:10px;
}
.mod-preview .store-phone{
  width:100px;background:#1a1a2e;border-radius:18px;padding:6px;
  box-shadow:0 8px 25px rgba(0,0,0,.15);
  animation:phoneFloat 4s ease-in-out infinite;
}
.mod-preview .store-screen{
  background:#fff;border-radius:12px;overflow:hidden;padding:8px;
}
.mod-preview .store-screen .st-bar{
  background:var(--vino);color:var(--white);font-size:8px;font-weight:700;
  padding:6px;margin:-8px -8px 6px;text-align:center;
}
.mod-preview .store-screen .st-items{display:flex;flex-direction:column;gap:4px}
.mod-preview .store-screen .st-item{
  display:flex;justify-content:space-between;font-size:8px;padding:4px 0;
  border-bottom:1px solid #f0f0f0;
}
.mod-preview .store-screen .st-cart{
  background:var(--oro);color:var(--carbon);text-align:center;padding:5px;
  border-radius:6px;font-size:8px;font-weight:800;margin-top:6px;
}
.mod-preview .delivery-bike{
  font-size:24px;animation:bikeRide 3s linear infinite;
}
@keyframes bikeRide{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}

/* Hover interactions - cards expand preview on hover */
.module-card:hover .mod-preview{transform:scale(1.02);transition:transform .3s}
.module-card:hover .mod-preview .fp-table.selected{animation-duration:1.2s}
.module-card:hover .mod-preview .scooter-icon{animation-duration:1.5s}
.module-card:hover .mod-preview .kds-mini-ticket{transform:scale(1.03)}