/*
Theme Name: Guachabar
Theme URI: https://guachabar.com
Author: WDVS
Author URI: https://webdesignvaliasolution.es/
Description: Tema personalizado para Guachabar - Restaurante · Bar · Moratalaz
Version: 1.0
Text Domain: guachabar
*/
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700;800&family=Kalam:wght@400;700&display=swap');

:root{
  --black:#050606;
  --panel:#0b0d0e;
  --red:#f51c32;
  --gold:#f4bd62;
  --white:#f7f6f2;
  --muted:#bbb8b0;
  --border-color: #3a3c3c;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#050606;color:var(--white);font-family:Inter,Arial,sans-serif;font-size:14px;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit}

.condensed{font-family:"Barlow Condensed",Impact,sans-serif}
.script{font-family:Kalam,cursive;font-weight:700}

.layout{max-width:1740px;margin:0 auto;position:relative;overflow:hidden;background:#070808;min-height:100vh}

/* ===== LOGOTIPOS ===== */
.logo-img {
  display: inline-block;
  max-height: 100px;
  width: auto;
  object-fit: contain;
  vertical-align: middle;
}
.side-logo { font-size:18px; margin:4px 0 27px; display: inline-block; }
.center-logo {
  position:absolute; left:50%; transform:translateX(-50%);
  max-height: 50px;
}
.bottom-logo { max-height: 30px; width: auto; }

/* ===== MENÚ LATERAL ===== */
.nav-links{display:grid;gap:15px}
.nav-links a,.side-info a{
  display:flex;align-items:center;gap:13px;
  font-family: 'Kalam', cursive;font-size: 24px;
}
.nav-links i,.side-info i{width:17px;font-size:15px}
.nav-links a.active{color:var(--red);font-weight:700}
.side-rule{height:1px;background:#606163;margin:17px 0}
.overline{font-size:8px;letter-spacing:1.6px;text-transform:uppercase;color:#ddd}
.side-info{display:grid;gap:12px;margin-top:13px}
.social{display:flex;gap:14px;align-items:center;font-size:16px}
.side-social{margin-top:14px}
.vibe{font-size:14px;line-height:1.2;text-align:center;margin-top:31px;transform:rotate(-7deg)}

/* ===== Paneles laterales deslizantes ===== */
.side-panel{
  position:fixed;top:0;height:100vh;background:#070808;z-index:1200;
  padding:22px 20px;overflow-y:auto;
  transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.side-panel.left{
  left:0;width:290px;max-width:85%;
  border-right:1px solid #55595a;
  transform:translateX(-100%);
  box-shadow:6px 0 24px rgba(0,0,0,.5);
}
.side-panel.left.open{transform:translateX(0)}
.side-panel.right{
  right:0;width:310px;max-width:88%;
  border-left:1px solid #55595a;
  transform:translateX(100%);
  box-shadow:-6px 0 24px rgba(0,0,0,.5);
  background:linear-gradient(180deg,#0b0d0e 0%,#070808 100%);
}
.side-panel.right.open{transform:translateX(0)}

.side-panel .side-logo{font-size:20px;margin:4px 0 26px;display:inline-block}
.side-panel .side-close{
  position:absolute;right:14px;top:16px;font-size:24px;cursor:pointer;
  background:none;border:0;color:#eee;line-height:1;
}
.panel-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.6);
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;
  z-index:1100;
}
.panel-overlay.open{opacity:1;visibility:visible}

.hamb{background:none;border:0;cursor:pointer;padding:6px;display:flex;flex-direction:column;gap:5px;color:#eee}
.hamb span{display:block;width:24px;height:2px;background:#eee;border-radius:2px;transition:all .3s ease}
.hamb.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.hamb.active span:nth-child(2){opacity:0}
.hamb.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* Topbar */
.topbar{height:90px;background:rgba(5,6,7,.95);display:flex;align-items:center;padding:0 25px;gap:28px;position:relative;z-index:5}

.top-links{
  display:flex;gap:25px;align-items:center;
  font-family: 'Kalam', cursive;font-weight:600;
  text-transform:uppercase;font-size:19px;
}
.top-links a { color: white; }
.top-links a.active { color: var(--red); }
.top-links a.reserva { color: var(--gold); }

.top-links a {
  position: relative;display: inline-block;padding: 5px 0;
  transition: color 0.3s ease, transform 0.3s ease;
}
.top-links a::after {
  content: '';position: absolute;width: 0;height: 2px;bottom: 0;left: 50%;
  background-color: var(--gold);
  transition: width 0.3s ease, left 0.3s ease;
}
.top-links a:hover { color: var(--gold);transform: translateY(-2px); }
.top-links a:hover::after { width: 100%;left: 0; }
.top-links a.active::after { background-color: var(--red); width: 100%; left: 0; }
.top-links a.reserva:hover { color: var(--red); }
.top-links a.reserva::after { background-color: var(--red); }

.top-right{margin-left:auto;display:flex;align-items:center;gap:26px}

.menu-right-btn{background:none;border:0;cursor:pointer;padding:6px;color:var(--gold);font-size:20px;display:flex;align-items:center;justify-content:center;transition:transform .2s ease,color .2s ease}
.menu-right-btn:hover{color:#fff;transform:scale(1.1)}

/* Panel derecho */
.right-panel-hero{
  height:150px;border-radius:10px;overflow:hidden;position:relative;
  background:linear-gradient(0deg,rgba(0,0,0,.85),transparent 70%),
    url('img/c1.jpg') center/cover;
  padding:16px 14px 12px;margin-bottom:18px;
}
.right-panel-hero small{font-size:7px;color:var(--gold);letter-spacing:1.5px;text-transform:uppercase;display:block}
.right-panel-hero h3{font:700 20px/.95 "Barlow Condensed";text-transform:uppercase;margin:8px 0 0}
.right-panel-hero b{font:italic 700 44px/.85 Kalam;color:var(--red);display:block;margin-top:2px}
.right-buttons{display:grid;gap:8px;margin-bottom:18px}
.right-buttons a{
  display:flex;justify-content:space-between;align-items:center;
  padding:11px 14px;border-radius:6px;
  font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;
  transition:all .25s ease;
}
.right-buttons a.primary{background:var(--red);color:#fff;border:1px solid var(--red)}
.right-buttons a.primary:hover{background:#fff;color:#000;border-color:#fff;transform:translateY(-2px)}
.right-buttons a.secondary{background:#080909;color:#fff;border:1px solid var(--gold)}
.right-buttons a.secondary:hover{background:#fff;color:#000;border-color:#fff;transform:translateY(-2px)}
.right-product{
  border-top:1px solid #333;padding-top:14px;margin-bottom:10px;
}
.right-product small{color:var(--gold);font-size:8px;letter-spacing:1.5px;text-transform:uppercase;font-weight:700}
.right-product img{width:100%;height:110px;object-fit:cover;border-radius:6px;margin-top:8px;border:1px solid #333}
.right-product strong{font:700 15px "Barlow Condensed";display:block;margin-top:8px;text-transform:uppercase;letter-spacing:.5px}
.right-product em{font-style:normal;color:var(--gold);font-size:12px;font-weight:700}
.right-product .plus{position:static;display:inline-grid;margin-left:8px;vertical-align:middle;width:24px;height:24px}

/* ===== ESTILOS COMPARTIDOS ===== */
.section-tag{color:var(--red);font-size:12px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;display:flex;align-items:center;gap:10px;margin-bottom:5px}
.section-tag::before{content:"";display:block;width:25px;height:2px;background-color:var(--red)}
.gold-tag{color:var(--gold);font-size:12px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;display:flex;align-items:center;gap:10px;margin-bottom:5px}
.gold-tag::before{content:"";display:block;width:25px;height:2px;background-color:var(--gold)}

.title-script{font-family:'Kalam',cursive;font-size:42px;line-height:1;text-transform:uppercase;margin:10px 0 15px;transform:rotate(-2deg);}

.btn-home {
  background: var(--red);color: white;border-radius: 4px;padding: 12px 24px;
  font-size: 13px;font-weight: 800;text-transform: uppercase;
  display: inline-flex;align-items: center;gap: 10px;
  transition: all 0.25s ease;border: 1px solid var(--red);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);cursor: pointer;text-decoration: none;
}
.btn-home:hover {
  background: white;color: black;border-color: white;
  transform: translateY(-2px);box-shadow: 0 6px 20px rgba(255,255,255,0.25);
}

.btn-outline-gold {
  background: transparent;color: var(--white);border: 1px solid var(--gold);
  border-radius: 30px;padding: 12px 30px;font-size: 13px;font-weight: 800;
  text-transform: uppercase;display: inline-flex;align-items: center;gap: 10px;
  transition: all 0.3s ease;cursor: pointer;
}
.btn-outline-gold:hover { background: var(--gold);color: black;transform: translateY(-2px); }

.social-circle {
  width: 36px;height: 36px;border-radius: 50%;
  display: flex;align-items: center;justify-content: center;
  background-color: var(--red);color: white;font-size: 16px;
  transition: all 0.3s ease;border: 1px solid var(--red);
}
.social-circle:hover { background-color: white;color: black;border-color: white; }

/* Footer */
.footer{min-height:125px;display:grid;grid-template-columns:22% 46% 32%;padding:20px 40px 12px;background:#080a0a; border-top: 1px solid #222;}
.footer-col{padding:0 26px;border-right:1px solid #343536}
.footer-col:first-child{padding-left:0}
.footer-col:last-child{border:0}
.footer .social{margin-top:17px}
.newsletter{font-size:10px}
.newsletter strong{color:var(--gold);font-size:8px;letter-spacing:1px;text-transform:uppercase}
.subscribe{display:flex;margin-top:8px;max-width:330px}
.subscribe input{min-width:0;flex:1;background:#282a2b;border:1px solid #494a4b;padding:9px 12px;color:white;font-size:10px;border-radius:3px 0 0 3px}
.subscribe button{background:var(--red);border:0;color:white;width:38px;border-radius:0 3px 3px 0}
.contact-info{display:grid;gap:8px;font-size:9px}
.contact-info span{display:flex;gap:10px}
.contact-info i{color:#eee;width:14px}
.bottom-bar{height:48px;border-top:2px solid var(--red);display:flex;align-items:center;justify-content:center;gap:24px;font-size:8px;color:#aaa}

/* ===== HOME ===== */
.hero{height:510px;position:relative;background:#14100d;overflow:hidden}
.hero-bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 53%;z-index:0}
.hero-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.68) 35%,rgba(0,0,0,.08) 74%),
             linear-gradient(0deg,rgba(0,0,0,.38),transparent 35%);}
.hero-copy{position:absolute;left:7%;top:78px;max-width:590px;z-index:2}
.eyebrow{color:#ffd08b;font-size:13px;letter-spacing:3px;font-weight:700;text-transform:uppercase}
.hero-title{font-size:51px;line-height:.91;text-transform:uppercase;margin:39px 0 2px;font-style:italic;font-weight:700;letter-spacing:-1px;transform: rotate(-5deg);}
.hero-live{font-size:86px;color:var(--red);line-height:.95;position:relative;margin:0 0 47px;transform: rotate(-5deg);}
.hero-live:after{content:"";position:absolute;width:230px;height:8px;bottom:-6px;left:0;border-top:6px solid var(--red);border-radius:50%;transform:rotate(-7deg)}
.hero-copy p{font-size:14px;line-height:1.55;max-width:490px;margin:22px 0 18px}

.actions{display:flex;flex-direction:row;gap:10px;flex-wrap:nowrap;align-items:center}
.btn-red,.btn-gold,.btn-outline{
  height:36px;padding:0 14px;border-radius:4px;
  text-transform:uppercase;font-size:14px;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  cursor:pointer;transition:all .25s ease;letter-spacing:.5px;white-space:nowrap;
}
.btn-red{background:var(--red);color:#fff;border:1px solid var(--red);box-shadow:0 4px 16px #0007;}
.btn-red:hover{background:#fff;color:#000;border-color:#fff;transform:translateY(-2px);box-shadow:0 6px 20px rgba(255,255,255,.25);}
.btn-gold{background:#090a0b;color:#fff;border:1px solid var(--gold);}
.btn-gold:hover{background:#fff;color:#000;border-color:#fff;transform:translateY(-2px);box-shadow:0 6px 20px rgba(255,255,255,.25);}
.btn-outline{background:transparent;color:#fff;border:1px solid #fff;}
.btn-outline:hover{background:#fff;color:#000;border-color:#fff;transform:translateY(-2px);box-shadow:0 6px 20px rgba(255,255,255,.25);}

.feature-row{padding:17px 22px 20px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;background:#080a0b;border-bottom:1px solid #3c3e3f;margin: 2% 0;}
.feature-card{
  aspect-ratio: 4 / 3;border:1px solid #555;border-radius:5px;
  overflow:hidden;position:relative;background:#111;
  display: flex;align-items: center;justify-content: center;
}
.feature-card img{width: 100%;height: 100%;object-fit: contain;filter:saturate(1.13);transition:transform .5s ease;}
.feature-card:hover img{transform:scale(1.12)}
.feature-card:after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.94)); pointer-events: none;}
.feature-copy{position:absolute;z-index:1;bottom:12px;left:12px}
.feature-copy strong{display:block;font-family:"Barlow Condensed";font-size:28px;text-transform:uppercase}
.feature-copy span{font-size:13px}
.round-arrow{position:absolute;right:8px;bottom:12px;width:28px;height:28px;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;color:var(--gold);z-index:2}

.about{height:462px;display:grid;grid-template-columns:40% 60%;border-bottom:1px solid #6a4a31;background:#090b0b}
.about-photo{position:relative;overflow:hidden}
.about-photo img{width:100%;height:100%;object-fit:cover;filter:brightness(.76);transition:transform .5s ease;}
.about:hover .about-photo img{transform:scale(1.05);}
.photo-quote{position:absolute;left:10%;bottom:32px;font-size:19px;line-height:1.15;text-transform:uppercase;transform:rotate(-5deg);text-shadow:0 3px 5px #000}
.photo-quote:after{content:"";display:block;width:105px;border-top:5px solid var(--red);margin-top:9px;transform:rotate(-8deg)}
.about-content{padding:31px 30px;display:grid;grid-template-columns:1.2fr .8fr;gap:22px;align-items:center;background:radial-gradient(ellipse at 80% 50%,#101313,#080909 70%)}
.section-title{font-family:"Barlow Condensed";font-size:49px;text-transform:uppercase;line-height:.98;margin:12px 0 11px}
.section-title em{font-style:normal;color:var(--red)}
.about-content p,.event-copy p{font-size:14px;line-height:1.55;color:#ddd;max-width:350px}

.outline-pill{
  display:inline-flex;align-items:center;gap:9px;
  border:1px solid var(--red);border-radius:4px;padding:10px 20px;margin-top:8px;
  font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;
  color:#fff;background:var(--red);box-shadow:0 4px 16px #0007;
  transition:all .25s ease;cursor:pointer;white-space:nowrap;
}
.outline-pill:hover{background:#fff;color:#000;border-color:#fff;transform:translateY(-2px);box-shadow:0 6px 20px rgba(255,255,255,.25);}
.outline-pill.gold{background:var(--red);border-color:var(--red);color:#fff;}
.outline-pill.gold:hover{background:#fff;color:#000;border-color:#fff;box-shadow:0 6px 20px rgba(255,255,255,.25);}

.benefits{display:grid;gap:14px}
.benefit{display:flex;align-items:center;gap:14px;font-size:14px;line-height:1.4}
.benefit i{width:30px;height:30px;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;color:var(--gold);font-size:14px}

.event-section{height:384px;display:grid;grid-template-columns:38% 62%;border-bottom:1px solid #67503c;background:#090b0b;overflow:hidden;}
.event-copy{padding:20px 28px 15px 40px}
.event-copy .section-title{font-size:49px;margin:15px 0 5px}
.event-photo{background:linear-gradient(90deg,#080909 0%,transparent 24%),url('img/21.jpg') center 53%/cover; transition:transform .5s ease;}
.event-section:hover .event-photo {transform:scale(1.05);}

.menu-section{padding:18px 40px 22px;border-bottom:1px solid #4f3c2d;background:linear-gradient(90deg,#090b0b,#0a0c0d); position: relative; overflow: hidden; margin: 2% 0;}
.menu-section .section-title{font-size:28px;margin:8px 0 5px}

.dishes-wrap{position:relative; margin-top: 15px;}
.dish-row{display: flex;gap: 12px;overflow-x: auto;scroll-behavior: smooth;scroll-snap-type: x mandatory;padding-bottom: 10px;}
.dish-row::-webkit-scrollbar { display: none; }
.dish-row { -ms-overflow-style: none; scrollbar-width: none; }
.dish{
  flex: 0 0 calc(25% - 9px);min-width: 200px;height:340px;
  border:1px solid #48494a;border-radius:5px;overflow:hidden;position:relative;
  background:#151515;cursor:pointer;scroll-snap-align: start;
  transition: border-color 0.3s ease;
}
.dish:hover { border-color: var(--gold); }
.dish img{height:100%;width:100%;object-fit:cover; transition:transform .4s ease;}
.dish:hover img{transform:scale(1.15);}
.dish:after{content:"";position:absolute;inset:48% 0 0;background:linear-gradient(transparent,#000e); pointer-events:none;}
.dish-info{position:absolute;bottom:9px;left:11px;z-index:1}
.dish-info strong{font-family:"Barlow Condensed";font-size:24px;text-transform:uppercase;display:block}
.dish-info small{font-size:13px;font-weight:700}
.plus{
  position:absolute;right:9px;bottom:10px;z-index:2;
  width:25px;height:25px;border:1px solid var(--gold);border-radius:50%;
  color:var(--gold);display:grid;place-items:center;transition: all 0.3s ease;
}
.dish:hover .plus { background-color: var(--gold);color: black; }
.dish-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  color:var(--gold);border:1px solid #666;border-radius:50%;
  width:35px;height:35px;display:grid;place-items:center;
  cursor:pointer;background:#090a0b;z-index:3;transition: all 0.2s ease;
}
.dish-nav:hover { background:var(--gold); color:#090a0b; border-color:var(--gold);}
.dish-nav.left{left:-15px;}
.dish-nav.right{right:-15px;}

.promo-card, .event-grid-card {
  border:1px solid #555;border-radius:10px;overflow:hidden;background:#111;
  display:flex;flex-direction:column;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.promo-card:hover, .event-grid-card:hover {
  transform: translateY(-4px); border-color: var(--gold);box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.promo-img-wrapper, .event-img-wrapper { overflow: hidden; position: relative; }
.promo-card img, .event-grid-card img { transition: transform .5s ease;width:100%; height:100%; object-fit:cover; }
.promo-card:hover img, .event-grid-card:hover img { transform: scale(1.12); }

/* ===== CARTA ===== */
.hero-carta {
  position: relative;height: 500px;
  background: linear-gradient(90deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.1) 100%), 
              url('img/ca1.jpg') center/cover;
}
.carta-grid-container {
  display: grid;grid-template-columns: repeat(3, 1fr);gap: 25px;
  padding: 60px 5%;background: #090b0b;
}
.carta-card {
  background: #000;border: 1px solid var(--gold);border-radius: 5px;
  overflow: hidden;position: relative;display: flex;flex-direction: column;
  transition: border-color 0.3s ease;cursor: pointer;width: 100%;
}
.carta-card:hover { border-color: #fff; }
.carta-img-wrapper { width: 100%;height: 320px;overflow: hidden;position: relative; }
.carta-img-wrapper img { width: 100%;height: 100%;object-fit: cover;transition: transform 0.5s ease; }
.carta-card:hover .carta-img-wrapper img { transform: scale(1.08); }
.carta-card-icon {
  position: absolute;top: 15px;right: 15px;width: 45px;height: 45px;border-radius: 50%;
  border: 1px solid var(--gold);background: rgba(0, 0, 0, 0.6);
  display: flex;align-items: center;justify-content: center;
  color: var(--gold);font-size: 20px;z-index: 2;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.carta-card:hover .carta-card-icon { background-color: var(--gold);color: black; }
.carta-content {
  padding: 20px;position: relative;flex: 1;display: flex;flex-direction: column;background: #050606;
}
.carta-title {
  font-family: 'Kalam', cursive;font-size: 2.2rem;line-height: 1;margin-top: 0;margin-bottom: 5px;
  color: white;text-transform: uppercase;transform: rotate(-3deg);transform-origin: left center;display: inline-block;
}
.carta-title span { color: var(--red); }
.carta-desc { color: #aaa;font-size: 14px;line-height: 1.4;margin-bottom: 15px;flex: 1; }
.carta-arrow {
  position: absolute;bottom: 20px;right: 20px;color: var(--gold);font-size: 20px;transition: transform 0.3s ease;
}
.carta-card:hover .carta-arrow { transform: translateX(5px); }

/* ===== CONTACTO ===== */
.form-input {
  width: 100%;background: transparent;border: 1px solid var(--border-color);
  border-radius: 8px;padding: 14px 18px;color: var(--white);
  font-family: Inter, sans-serif;font-size: 14px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.form-input::placeholder { color: #666; }
.form-input:focus { outline: none;border-color: var(--gold);box-shadow: 0 0 0 1px var(--gold); }

.btn-submit {
  background: var(--red);color: white;border-radius: 4px;padding: 12px 30px;
  font-size: 13px;font-weight: 800;text-transform: uppercase;
  display: inline-flex;align-items: center;gap: 10px;
  transition: all 0.25s ease;border: 1px solid var(--red);cursor: pointer;
}
.btn-submit:hover { background: white;color: black;border-color: white;transform: translateY(-2px); }

.icon-circle {
  width: 45px;height: 45px;border: 1px solid var(--gold);border-radius: 50%;
  display: flex;align-items: center;justify-content: center;
  color: var(--gold);font-size: 18px;flex-shrink: 0;
}
.hero-contact {
  position: relative;height: 550px;
  background: linear-gradient(90deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.1) 100%), 
              url('img/c1.jpg') center/cover;
}

/* ===== ALÉRGENOS ===== */
.hero-alergenos {
  position: relative;height: 500px;
  background: linear-gradient(90deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.1) 100%), 
              url('img/a1.jpg') center/cover;
}
.alergeno-card {
  text-align: center;padding: 20px 10px;border-radius: 10px;
  border: 1px solid transparent;transition: all 0.3s ease;cursor: default;
}
.alergeno-card:hover {
  transform: translateY(-8px) scale(1.03);border-color: #333;background: rgba(255,255,255,0.02);
}
.alergeno-icon-circle {
  width: 100px;height: 100px;border: 2px solid var(--gold);border-radius: 50%;
  display: flex;align-items: center;justify-content: center;
  margin: 0 auto 20px;color: var(--gold);font-size: 40px;
  background-color: transparent;transition: all 0.3s ease;
}
.alergeno-card:hover .alergeno-icon-circle {
  background-color: var(--gold);color: black;box-shadow: 0 0 20px rgba(244, 189, 98, 0.4);
}
.alergeno-badge {
  display: inline-block;background: var(--red);color: white;
  font-family: 'Kalam', cursive;font-size: 1.2rem;font-weight: 700;
  padding: 2px 15px;transform: rotate(-3deg);margin-bottom: 15px;
  clip-path: polygon(0% 0%, 100% 0%, 95% 100%, 5% 100%);
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);transition: transform 0.3s ease;
}
.alergeno-card:hover .alergeno-badge { transform: rotate(-3deg) scale(1.05); }
.alergeno-desc { color: #aaa;font-size: 12px;line-height: 1.4;max-width: 200px;margin: 0 auto;transition: color 0.3s ease; }
.alergeno-card:hover .alergeno-desc { color: #fff; }
.consulta-box {
  display: grid;grid-template-columns: 1fr 1fr;gap: 40px;
  align-items: center;border-top: 1px solid #333;padding-top: 40px;margin-top: 60px;
}

/* ===== DELIVERY ===== */
.hero-delivery {
  position: relative;height: 550px;
  background: linear-gradient(90deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.1) 100%), 
              url('img/d1.jpg') center/cover;
}
.delivery-card {
  background: #090b0b;border: 1px solid var(--gold);border-radius: 8px;
  overflow: hidden;position: relative;display: flex;flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;height: 100%;
}
.delivery-card:hover { transform: translateY(-5px);box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.delivery-img-wrapper { width: 100%;height: 250px;overflow: hidden;position: relative; }
.delivery-img-wrapper img { width: 100%;height: 100%;object-fit: cover;transition: transform 0.5s ease; }
.delivery-card:hover .delivery-img-wrapper img { transform: scale(1.1); }
.delivery-content {
  padding: 30px 20px 20px;position: relative;flex: 1;
  display: flex;flex-direction: column;align-items: center;text-align: center;
}
.delivery-icon {
  position: absolute;top: -35px;left: 50%;transform: translateX(-50%);
  width: 70px;height: 70px;border-radius: 50%;border: 2px solid var(--gold);
  background: #000;display: flex;align-items: center;justify-content: center;
  color: var(--gold);font-size: 28px;z-index: 2;
}
.delivery-title {
  font-family: 'Kalam', cursive;font-size: 2.2rem;line-height: 0.9;
  margin-top: 30px;margin-bottom: 20px;color: white;
}
.delivery-title span { color: var(--red);display: block;font-size: 2.8rem; }
.schedule-row {
  display: flex;align-items: center;gap: 20px;padding: 20px 0;border-bottom: 1px solid #333;
}
.schedule-row:last-child { border-bottom: none; }
.schedule-icon {
  width: 40px;height: 40px;border: 1px solid var(--gold);border-radius: 50%;
  display: flex;align-items: center;justify-content: center;
  color: var(--gold);font-size: 16px;flex-shrink: 0;
}

/* ===== EVENTOS ===== */
.hero-events {
  position: relative;height: 550px;
  background: linear-gradient(90deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.1) 100%), 
              url('img/m1.jpg') center/cover;
}
.event-card-private {
  background: #0d0f0f;border: 1px solid #333;border-radius: 10px;overflow: hidden;
  display: flex;flex-direction: column;transition: all 0.3s ease;text-align: center;
}
.event-card-private:hover {
  border-color: var(--gold);transform: translateY(-5px);box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.event-card-private img {
  width: 100%;
  aspect-ratio: 16 / 9; /* Mantiene una proporción bonita */
  object-fit: cover;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}
.event-card-private:hover img { opacity: 1; }
.event-card-body {
  padding: 25px 20px;display: flex;flex-direction: column;align-items: center;flex: 1;
}
.event-icon { font-size: 2.5rem;color: var(--gold);margin-bottom: 15px; }
.event-title {
  font-family: 'Barlow Condensed';font-size: 22px;text-transform: uppercase;
  letter-spacing: 1px;margin-bottom: 10px;
}
.event-desc {
  color: #aaa;font-size: 13px;line-height: 1.5;margin-bottom: 20px;flex: 1;
}
.benefit-icon-wrapper {
  width: 70px;height: 70px;border: 2px solid var(--gold);border-radius: 50%;
  display: flex;align-items: center;justify-content: center;
  margin: 0 auto 20px;background-color: transparent;transition: all 0.3s ease;
}
.benefit-icon-wrapper i { font-size: 28px;color: var(--gold); }
.benefit-card:hover .benefit-icon-wrapper { background-color: var(--gold); }
.benefit-card:hover .benefit-icon-wrapper i { color: black; }

/* ===== PROMOCIONES ===== */
.hero-promos {
  position: relative;height: 500px;
  background: linear-gradient(90deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.1) 100%), 
              url('img/pp.jpg') center/cover;
}
.promo-grid-layout {
  display: grid;grid-template-columns: repeat(3, 1fr);gap: 30px;
  width: 100%;padding: 0 5%;margin: 0 auto;
}
.promo-grid-card {
  background: #000;border: 1px solid #333;border-radius: 5px;overflow: hidden;
  position: relative;display: flex;flex-direction: column;
  transition: border-color 0.3s ease;cursor: pointer;width: 100%;
}
.promo-grid-card:hover { border-color: var(--gold); }

/* --- AQUÍ ESTÁ EL CAMBIO DEL HEIGHT --- */
.promo-img-wrapper { 
  width: 100%; 
  height: auto; /* Modificado de 300px a auto */
  aspect-ratio: 16 / 9; /* Cambiado de 4/3 a 16/9 */
  overflow: hidden; 
  position: relative; 
}

.promo-img-wrapper img { width: 100%;height: 100%;object-fit: cover;transition: transform 0.5s ease; }
.promo-grid-card:hover .promo-img-wrapper img { transform: scale(1.08); }
.promo-content {
  padding: 30px 20px;position: relative;flex: 1;display: flex;flex-direction: column;background: #050606;
}
.promo-badge {
  position: absolute;top: -15px;left: 20px;background: var(--red);color: white;
  font-family: 'Kalam', cursive;font-size: 1.2rem;font-weight: 700;
  padding: 4px 20px 4px 15px;transform: rotate(-5deg);z-index: 2;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
  clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
}
.promo-title {
  font-family: 'Kalam', cursive;font-size: 1.8rem;text-transform: uppercase;
  line-height: 1.1;margin-top: 10px;margin-bottom: 10px;color: white;
  transform: rotate(-3deg);transform-origin: left center;display: inline-block;
}
.promo-title span { color: var(--red) !important; } /* Añadido !important por seguridad */
.promo-desc { color: #aaa;font-size: 14px;line-height: 1.5;margin-bottom: 25px;flex: 1; }
.promo-arrow {
  position: absolute;bottom: 20px;right: 20px;color: var(--gold);
  font-size: 24px;transition: transform 0.3s ease;
}
.promo-grid-card:hover .promo-arrow { transform: translateX(5px); }

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .hero-title-carta, .hero-title-contact, .hero-title-promos, .hero-title-alergenos, .hero-title-delivery, .hero-title-events { font-size: 3.5rem !important; }
  .red-word { font-size: 4.5rem !important; }
  .consulta-box { grid-template-columns: 1fr !important; text-align: center; }
  .consulta-box .chef-icon { margin: 0 auto 20px; }
  .grid-contact, .map-grid, .follow-section, .grid-delivery, .schedule-grid, .grid-private-events { grid-template-columns: 1fr !important; }
  .carta-grid-container { grid-template-columns: 1fr 1fr !important; gap: 20px; }
  .carta-img-wrapper { height: 200px; }
  .promo-grid-layout { grid-template-columns: 1fr 1fr !important; padding: 0 2%; }
  .benefits-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 850px) {
  .top-links { display: none !important; }
  .top-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
  .center-logo{max-height: 38px;}
  .footer{grid-template-columns:1fr 1fr;gap:22px;padding:22px}
  .footer-col{padding:0 12px;border:0}
  .hero{height:480px}
  .hero-bg-img{object-position:58% center}
  .hero-copy{left:7%;top:65px}
  .hero-title{font-size:38px}
  .hero-live{font-size:67px}
  .actions{gap:6px}
  .btn-red,.btn-gold,.btn-outline{padding:0 8px;font-size:7px;height:32px}
  .feature-row{grid-template-columns:repeat(2,1fr);padding:14px;gap:10px}
  .about{height:auto;grid-template-columns:1fr}
  .about-photo{height:260px}
  .about-content{padding:28px 24px;grid-template-columns:1fr 1fr}
  .event-section{height:auto;grid-template-columns:1fr}
  .event-copy{padding:24px}
  .event-photo{height:230px}
  .menu-section{padding:20px 18px}
  .dish{ flex: 0 0 calc(50% - 6px); height:160px;}
  #promos-seccion div[style*="grid-template-columns:repeat(2"],
  #eventos-grid div[style*="grid-template-columns:repeat(3"]{grid-template-columns:1fr !important}
  #promos-seccion, #eventos-grid{padding:22px 18px !important}
}
@media (max-width: 600px) {
  .hero-title-carta, .hero-title-contact, .hero-title-promos, .hero-title-alergenos, .hero-title-delivery, .hero-title-events { font-size: 2.5rem !important; }
  .red-word { font-size: 3.5rem !important; }
  .carta-grid-container { grid-template-columns: 1fr 1fr !important; gap: 10px !important; padding: 30px 10px; }
  .carta-img-wrapper { height: 130px; }
  .carta-card-icon { width: 35px; height: 35px; font-size: 16px; top: 10px; right: 10px; }
  .carta-content { padding: 12px; }
  .carta-title { font-size: 1.1rem; }
  .carta-desc { font-size: 10px; margin-bottom: 5px; }
  .carta-arrow { bottom: 12px; right: 12px; font-size: 14px; }
  .promo-grid-layout { grid-template-columns: 1fr !important; padding: 0 5%; }
  .promo-img-wrapper { height: auto; aspect-ratio: 16 / 9; } /* Ajuste móvil */
  .alergeno-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 15px !important; }
  .alergeno-icon-circle { width: 70px; height: 70px; font-size: 28px; }
  .alergeno-badge { font-size: 1rem; }
  .alergeno-desc { font-size: 10px; }
  .alergeno-card { padding: 10px 5px; }
  .form-row { grid-template-columns: 1fr !important; }
  .benefits-grid { grid-template-columns: 1fr !important; }
  .footer{grid-template-columns:1fr;padding:22px 24px}
  .footer-col{padding:0}
  .newsletter{border-top:1px solid #333;padding-top:16px}
  .contact-info{border-top:1px solid #333;padding-top:16px}
  .bottom-bar{gap:12px;font-size:7px}
  .hero{height:450px}
  .hero-copy{top:64px;left:6%;right:5%}
  .hero-title{font-size:34px}
  .hero-live{font-size:62px}
  .hero-copy p{max-width:490px;font-size:15px}
  .actions{gap:8px}
  .btn-red,.btn-gold,.btn-outline{padding:0 12px;font-size:9px;height:34px}
  .center-logo{max-height: 32px;}
  .feature-copy{left:9px;bottom:9px}
  .feature-copy strong{font-size:12px}
  .feature-copy span{font-size:9px}
  .about-content{grid-template-columns:1fr;padding:24px}
  .benefits{grid-template-columns:1fr 1fr;gap:12px}
  .section-title{font-size:29px}
  .dish-row{gap:8px;margin:8px 0px 0}
  .dish{flex: 0 0 80%; height:145px;}
  .dish-nav.left{left:-10px; width:28px; height:28px;}
  .dish-nav.right{right:-10px; width:28px; height:28px;}
}





/* ============================================================
 * SINGLE PROMOCIÓN Y EVENTO (compartido)
 * ============================================================ */
.section-tag-center{
  color:var(--red);font-size:13px;font-weight:800;letter-spacing:1.4px;
  text-transform:uppercase;display:flex;align-items:center;gap:10px;
  margin-bottom:5px;justify-content:center;
}
.section-tag-center::before{content:"";display:block;width:25px;height:2px;background-color:var(--red);}
.section-tag-center::after{content:"";display:block;width:25px;height:2px;background-color:var(--red);}

.btn-instagram{
  background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
  color:white;border-radius:4px;padding:12px 24px;font-size:13px;font-weight:800;
  text-transform:uppercase;display:inline-flex;align-items:center;gap:10px;
  transition:all 0.25s ease;border:1px solid transparent;
  box-shadow:0 4px 16px rgba(0,0,0,0.4);cursor:pointer;text-decoration:none;
  background-size:200% 200%;background-position:0% 50%;
}
.btn-instagram:hover{
  background-position:100% 50%;transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(220,39,67,0.45);color:white;
}

/* Hero genérico para singles */
.hero-promo{
  position:relative;height:550px;
  background:linear-gradient(90deg,rgba(0,0,0,0.9) 0%,rgba(0,0,0,0.6) 50%,rgba(0,0,0,0.1) 100%),
    url('https://images.unsplash.com/photo-1571091718767-18b5b1457add?auto=format&fit=crop&w=1920&q=80') center/cover;
}
.hero-promo--evento{
  height:600px;
  background:linear-gradient(90deg,rgba(0,0,0,0.85) 0%,rgba(0,0,0,0.5) 50%,rgba(0,0,0,0.1) 100%),
    url('https://images.unsplash.com/photo-1514525253161-7a46d19cd819?auto=format&fit=crop&w=1920&q=80') center/cover;
}

/* Sección combo (promos) / iconos (eventos) */
.combo-section{padding:60px 5%;text-align:center;background:#090b0b;position:relative;}
.combo-title{font-family:'Kalam',cursive;font-size:4.5rem;line-height:0.9;text-transform:uppercase;margin-bottom:10px;}
.combo-title span{color:var(--red);}
.combo-subtitle{color:#aaa;font-size:1.1rem;max-width:600px;margin:0 auto 50px;line-height:1.5;}

.combo-icons-row{display:flex;justify-content:center;align-items:center;gap:30px;max-width:1000px;margin:0 auto;}
.combo-icon-box{display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;}

/* Líneas divisorias entre iconos (solo evento) */
.combo-section--evento .combo-icon-box:not(:last-child)::after{
  content:"";position:absolute;right:-30px;top:20%;height:60%;width:1px;background:#333;
}

.combo-icon-circle{
  width:110px;height:110px;border:2px solid var(--gold);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--gold);font-size:45px;margin-bottom:20px;
  background-color:transparent;transition:all 0.3s ease;cursor:default;
}
.combo-icon-box:hover .combo-icon-circle{
  background-color:var(--gold);color:black;
  box-shadow:0 0 20px rgba(244,189,98,0.4);transform:scale(1.05);
}
.combo-icon-box h4{font-family:'Barlow Condensed';font-size:1.3rem;text-transform:uppercase;margin-bottom:5px;letter-spacing:1px;color:white;}
.combo-icon-box p{color:#888;font-size:13px;}
.combo-plus{color:var(--gold);font-size:2.5rem;font-weight:300;padding-bottom:40px;}

/* Variante evento: títulos con Kalam y más grandes */
.combo-section--evento .combo-icon-box h4{
  font-family:'Kalam',cursive;font-size:1.8rem;letter-spacing:1px;
  padding:5px 15px;transform:rotate(-2deg);
}
.combo-section--evento .combo-icon-box p{color:#aaa;font-size:0.95rem;line-height:1.5;max-width:250px;}

/* Banner rojo flotante (solo promo) */
.red-brush-banner{
  background:var(--red);color:white;padding:30px 20px;
  font-family:'Kalam',cursive;font-size:2.5rem;line-height:1;
  text-transform:uppercase;box-shadow:5px 5px 15px rgba(0,0,0,0.5);
  clip-path:polygon(5% 0,100% 5%,95% 100%,0 95%);
  position:absolute;right:10%;top:50%;
  transform:translateY(-50%) rotate(-5deg);max-width:250px;
}

/* Sección Final */
.final-section{padding:60px 10%;background:#090b0b;}
.final-box{
  display:grid;grid-template-columns:1fr 1fr;
  border:1px solid var(--gold);border-radius:10px;overflow:hidden;background:#000;
}
.final-img{width:100%;height:100%;object-fit:cover;min-height:400px;}
.final-content{padding:50px;display:flex;flex-direction:column;justify-content:center;position:relative;}
.final-title{
  font-family:'Kalam',cursive;font-size:3.5rem;line-height:1;text-transform:uppercase;
  margin-bottom:20px;transform:rotate(-3deg);display:inline-block;
}
.final-title span{color:var(--red);}
.final-text{color:#aaa;font-size:1.1rem;line-height:1.6;margin-bottom:30px;max-width:400px;}
.crown-icon{position:absolute;top:40px;right:40px;font-size:2rem;color:var(--gold);transform:rotate(15deg);}

/* Variante evento: sin borde, con títulos más grandes */
.final-section--evento .final-box{
  grid-template-columns:1fr 1fr;border:0;border-radius:0;background:#090b0b;
  gap:50px;align-items:center;overflow:visible;
}
.final-section--evento .final-title{
  font-size:4.5rem;line-height:0.9;transform:rotate(-3deg);
  display:flex;flex-direction:column;
}
.final-section--evento .final-title span{font-size:5.5rem;margin-top:5px;color:var(--red);}
.final-section--evento .final-text{color:#ccc;max-width:500px;}

.btn-reserva{
  display:inline-flex;align-items:center;gap:15px;
  border:1px solid var(--gold);border-radius:30px;padding:12px 30px;
  font-family:'Kalam',cursive;font-size:1.1rem;font-weight:700;
  text-transform:uppercase;color:white;transition:all 0.3s ease;
  background:transparent;text-decoration:none;width:fit-content;
}
.btn-reserva:hover{
  background:var(--gold);color:black;transform:translateY(-3px);
  box-shadow:0 5px 15px rgba(244,189,98,0.3);
}

/* Caja de fecha (evento) */
.date-box{
  display:inline-flex;align-items:center;border:1px solid var(--gold);
  border-radius:30px;padding:10px 20px;gap:15px;
  font-family:'Kalam',cursive;font-size:1.1rem;color:var(--gold);
  margin-bottom:25px;transform:rotate(-2deg);background:rgba(0,0,0,0.4);
}
.date-box i{font-size:1.3rem;}
.date-box strong{color:white;font-weight:700;}
.date-box .dot{font-size:1.8rem;line-height:0;margin:0 5px;}

/* Galería (evento) */
.gallery-section{
  padding:40px 10% 80px;display:grid;grid-template-columns:repeat(3,1fr);
  gap:20px;background:#090b0b;
}
.gallery-item{
  border:1px solid var(--gold);border-radius:10px;overflow:hidden;
  aspect-ratio:4 / 3;position:relative;cursor:pointer;
}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease;}
.gallery-item:hover img{transform:scale(1.1);}

/* Responsive singles */
@media (max-width:1024px){
  .red-brush-banner{display:none;}
  .combo-icons-row{flex-wrap:wrap;}
  .combo-plus{padding-bottom:0;}
  .combo-section--evento .combo-icon-box:not(:last-child)::after{display:none;}
  .final-section--evento .final-title{font-size:3.5rem;}
  .final-section--evento .final-title span{font-size:4rem;}
}
@media (max-width:850px){
  .final-box{grid-template-columns:1fr;}
  .final-img{min-height:250px;}
  .final-content{padding:30px 20px;text-align:center;}
  .final-title{font-size:2.5rem;}
  .final-section--evento .final-box{grid-template-columns:1fr;text-align:center;gap:30px;}
  .final-section--evento .final-title{align-items:center;font-size:3rem;}
  .final-section--evento .final-title span{font-size:3.5rem;}
  .btn-reserva{margin:0 auto;}
  .gallery-section{grid-template-columns:1fr;padding:20px 5% 40px;}
  .gallery-item{aspect-ratio:16 / 9;}
}
@media (max-width:600px){
  .hero-promo{height:550px;}
  .hero-promo--evento{height:550px;}
  .combo-title{font-size:2.5rem;}
  .combo-icons-row{flex-direction:column;gap:20px;}
  .combo-section--evento .combo-icons-row{gap:40px;}
  .combo-plus{transform:rotate(90deg);}
  .combo-icon-circle{width:90px;height:90px;font-size:35px;}
  .final-box .btn-home, .final-box .btn-instagram{width:100%;justify-content:center;margin-bottom:10px;margin-left:0 !important;}
}

/* ===== ESTILOS PÁGINA DE EVENTOS ===== */
.eventos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  padding: 60px 10%;
  background: #090b0b;
}

.evento-card {
  background: #000;
  border: 1px solid #333;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.evento-card:hover {
  border-color: var(--gold);
  transform: translateY(-5px);
}

.evento-img-wrapper {
  position: relative;
  height: 250px;
  overflow: hidden;
}

.evento-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.evento-card:hover .evento-img-wrapper img {
  transform: scale(1.08);
}

.evento-badge {
  position: absolute;
  top: 15px;
  left: 15px;
  background: var(--red);
  color: white;
  font-family: 'Kalam', cursive;
  font-size: 1.2rem;
  font-weight: 700;
  padding: 5px 15px;
  transform: rotate(-3deg);
  clip-path: polygon(5% 0, 100% 5%, 95% 100%, 0 95%);
}

.evento-content {
  padding: 25px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.evento-title {
  font-family: 'Kalam', cursive;
  font-size: 2.2rem;
  line-height: 0.9;
  color: white;
  text-transform: uppercase;
  transform: rotate(-2deg);
  margin-bottom: 15px;
}

.evento-title span {
  color: var(--red);
  display: block;
}

.evento-desc {
  color: #aaa;
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 20px;
  flex: 1;
}

.evento-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 25px;
  font-size: 0.9rem;
  color: #ddd;
}

.evento-info div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.evento-info i {
  color: var(--gold);
  width: 16px;
  text-align: center;
}

.evento-card .btn-red {
  width: 100%;
  justify-content: center;
}

/* Responsive */
@media (max-width: 1200px) {
  .eventos-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .eventos-grid { grid-template-columns: 1fr; padding: 40px 5%; }
}


/* ============================================================
 * CARTA · PLATOS POR FAMILIA + NAV FIJA + QUICK VIEW
 * ============================================================ */

/* ---------- 1. HERO DE LA CARTA (por si no lo tenías) ---------- */
.hero-platos {
  position: relative;
  height: 500px;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.1) 100%),
    url('img/ca1.jpg') center/cover;
  padding-top: 70px; /* compensa la barra fija */
}

/* ---------- 2. BARRA FIJA DE CATEGORÍAS ---------- */
.categorias-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: rgba(5, 6, 6, 0.97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid #222;
  padding: 12px 10%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  white-space: nowrap;
}
.categorias-nav::-webkit-scrollbar { display: none; }

.categorias-nav-inner {
  display: flex;
  gap: 10px;
  justify-content: flex-start;
  align-items: center;
  min-height: 34px;
}

.cat-btn {
  flex: 0 0 auto;
  font-family: 'Barlow Condensed', Impact, sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px 16px;
  border-radius: 4px;
  border: 1px solid var(--red);
  background: transparent;
  color: var(--red);
  cursor: pointer;
  transition: all 0.25s ease;
  transform: rotate(-1deg);
  white-space: nowrap;
  line-height: 1;
}
.cat-btn:hover {
  background: rgba(245, 28, 50, 0.15);
  color: #fff;
}
.cat-btn.active {
  background: var(--red);
  color: #fff;
  box-shadow: 0 4px 12px rgba(245, 28, 50, 0.4);
  transform: rotate(-1deg) translateY(-1px);
}

/* ---------- 3. SECCIÓN DE PLATOS ---------- */
.seccion-platos {
  padding: 40px 10% 80px;
  background: #090b0b;
  min-height: 60vh;
}

/* Título de familia (Raciones, Pizzas, Postres…) */
.categoria-seccion { scroll-margin-top: 90px; }

.categoria-titulo {
  font-family: 'Barlow Condensed', Impact, sans-serif;
  font-size: 3rem;
  font-style: italic;
  font-weight: 900;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  margin: 60px 0 30px;
  position: relative;
  display: inline-block;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  text-shadow: 3px 3px 0 #000;
  padding: 0 20px;
  line-height: 1;
}
.categoria-titulo::after {
  content: "";
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-2deg);
  width: 110%;
  height: 60%;
  background: var(--red);
  clip-path: polygon(3% 10%, 97% 0, 100% 90%, 0 100%);
  z-index: -1;
  opacity: 0.85;
}
.categoria-seccion:first-of-type .categoria-titulo { margin-top: 0; }

/* Grid de platos */
.platos-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  max-width: 1500px;
  margin: 0 auto;
}

.plato-card {
  background: #000;
  border: 1px solid var(--gold);
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease;
  display: flex;
  flex-direction: column;
  padding: 15px;
  cursor: pointer; /* para el quick view */
}
.plato-card:hover {
  transform: translateY(-5px);
  border-color: var(--red);
}

.plato-img-wrapper {
  width: 100%;
  height: 180px;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 15px;
}
.plato-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
  display: block;
}
.plato-card:hover .plato-img { transform: scale(1.08); }

.plato-info {
  text-align: center;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Título con pincelada roja */
.plato-titulo-wrapper {
  position: relative;
  display: inline-block;
  margin: 0 auto 15px auto;
}
.plato-titulo-wrapper::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-2deg);
  width: 110%; height: 80%;
  background: var(--red);
  clip-path: polygon(2% 10%, 98% 0, 100% 90%, 0 100%);
  z-index: 1;
  opacity: 0.9;
}
.plato-titulo {
  font-family: 'Barlow Condensed', Impact, sans-serif;
  font-size: 1.6rem;
  color: #fff;
  text-transform: uppercase;
  margin: 0;
  transform: rotate(-3deg);
  line-height: 0.9;
  position: relative;
  z-index: 2;
  font-style: italic;
  font-weight: 900;
  padding: 0 5px;
}

.plato-desc {
  color: #ccc;
  font-size: 0.75rem;
  line-height: 1.4;
  margin-bottom: 15px;
  flex: 1;
}

/* Precio con pincelada */
.plato-precio-wrapper {
  position: relative;
  margin-bottom: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
}
.plato-precio-wrapper::before {
  content: "";
  position: absolute;
  width: 80px;
  height: 22px;
  background: var(--red);
  transform: rotate(-3deg);
  clip-path: polygon(0 10%, 100% 0, 95% 100%, 5% 90%);
  z-index: 1;
}
.plato-precio {
  position: relative;
  z-index: 2;
  color: #fff;
  font-weight: 900;
  font-size: 1.1rem;
  font-family: 'Barlow Condensed', Impact, sans-serif;
  margin: 0;
}

/* Alérgenos en tarjeta */
.plato-alergenos-title {
  font-family: 'Barlow Condensed', Impact, sans-serif;
  font-size: 0.8rem;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.plato-alergenos {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 5px;
  flex-wrap: wrap;
}

.alergeno-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  border: 1px solid;
  background: transparent;
  cursor: help;
  position: relative;
}
.alergeno-icon::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: #111;
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 11px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  border: 1px solid #333;
  z-index: 10;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
  pointer-events: none;
}
.alergeno-icon:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Colores alérgenos */
.al-gluten     { color: #f4bd62; border-color: #f4bd62; }
.al-crustaceos { color: #ff7b7b; border-color: #ff7b7b; }
.al-huevos     { color: #fce883; border-color: #fce883; }
.al-pescado    { color: #60a5fa; border-color: #60a5fa; }
.al-cacahuetes { color: #d97706; border-color: #d97706; }
.al-soja       { color: #86efac; border-color: #86efac; }
.al-lacteos    { color: #93c5fd; border-color: #93c5fd; }
.al-frutos     { color: #fca5a5; border-color: #fca5a5; }
.al-apio       { color: #bef264; border-color: #bef264; }
.al-mostaza    { color: #fde047; border-color: #fde047; }
.al-sesamo     { color: #d6d3d1; border-color: #d6d3d1; }
.al-sulfitos   { color: #c084fc; border-color: #c084fc; }
.al-altramuces { color: #fcd34d; border-color: #fcd34d; }
.al-moluscos   { color: #7dd3fc; border-color: #7dd3fc; }

/* Botón volver */
.btn-volver {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gold);
  text-decoration: none;
  font-weight: 600;
  margin-bottom: 30px;
  transition: color 0.3s ease;
}
.btn-volver:hover { color: #fff; }

/* ---------- 4. QUICK VIEW (MODAL) ---------- */
.qv-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.qv-overlay.open {
  display: flex;
  opacity: 1;
}

.qv-modal {
  position: relative;
  background: #0b0d0d;
  border: 1px solid var(--gold);
  border-radius: 12px;
  max-width: 900px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  box-shadow: 0 20px 60px rgba(0,0,0,0.8);
  transform: scale(0.92);
  transition: transform 0.3s ease;
}
.qv-overlay.open .qv-modal { transform: scale(1); }

.qv-img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  display: block;
}

.qv-body {
  padding: 35px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  overflow-y: auto;
}

.qv-titulo-wrapper {
  position: relative;
  display: inline-block;
  margin: 0 auto 20px;
}
.qv-titulo-wrapper::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-2deg);
  width: 115%; height: 85%;
  background: var(--red);
  clip-path: polygon(2% 10%, 98% 0, 100% 90%, 0 100%);
  z-index: 1;
  opacity: 0.9;
}
.qv-titulo {
  position: relative;
  z-index: 2;
  font-family: 'Barlow Condensed', Impact, sans-serif;
  font-size: 2.4rem;
  font-style: italic;
  font-weight: 900;
  color: #fff;
  text-transform: uppercase;
  margin: 0;
  padding: 0 12px;
  transform: rotate(-3deg);
  line-height: 0.95;
}

.qv-desc {
  color: #ccc;
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 25px;
}

.qv-precio-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  margin-bottom: 25px;
}
.qv-precio-wrapper::before {
  content: "";
  position: absolute;
  width: 120px;
  height: 30px;
  background: var(--red);
  transform: rotate(-3deg);
  clip-path: polygon(0 10%, 100% 0, 95% 100%, 5% 90%);
  z-index: 1;
}
.qv-precio {
  position: relative;
  z-index: 2;
  color: #fff;
  font-weight: 900;
  font-size: 1.5rem;
  font-family: 'Barlow Condensed', Impact, sans-serif;
  margin: 0;
}

.qv-alerg-title {
  font-family: 'Barlow Condensed', Impact, sans-serif;
  font-size: 0.85rem;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
}
.qv-alergenos {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.qv-alergenos .alergeno-icon {
  width: 30px;
  height: 30px;
  font-size: 13px;
}

.qv-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  border: 1px solid var(--red);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
}
.qv-close:hover {
  background: var(--red);
  color: #fff;
}

/* ---------- 5. RESPONSIVE ---------- */
@media (max-width: 1200px) {
  .platos-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
  .platos-grid { grid-template-columns: repeat(3, 1fr); }
  .hero-platos { height: 400px; }
  .categoria-titulo { font-size: 2.2rem; }
  .categorias-nav { padding: 10px 4%; }
  .seccion-platos { padding: 30px 4% 60px; }
}
@media (max-width: 700px) {
  .qv-modal { grid-template-columns: 1fr; max-height: 92vh; }
  .qv-img { min-height: 200px; max-height: 220px; }
  .qv-body { padding: 25px 20px; }
  .qv-titulo { font-size: 1.9rem; }
}
@media (max-width: 600px) {
  .platos-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .categoria-titulo { font-size: 1.8rem; margin: 40px 0 20px; }
  .plato-titulo { font-size: 1.3rem; }
  .plato-desc { font-size: 0.7rem; }
  .cat-btn { font-size: 0.85rem; padding: 7px 12px; }
}










/* Adaptar el HTML generado por wp_nav_menu */
.nav-links li,
.top-links li {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-links li a {
  display: flex;
  align-items: center;
  gap: 13px;
  font-family: 'Kalam', cursive;
  font-size: 24px;
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

.top-links li a {
  position: relative;
  display: inline-block;
  padding: 5px 0;
  color: white;
  text-decoration: none;
  font-family: 'Kalam', cursive;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 19px;
  transition: color 0.3s ease, transform 0.3s ease;
}

.nav-links li a:hover,
.top-links li a:hover {
  color: var(--gold);
}

/* Efecto línea dorada menú superior */
.top-links li a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 50%;
  background-color: var(--gold);
  transition: width 0.3s ease, left 0.3s ease;
}
.top-links li a:hover::after {
  width: 100%;
  left: 0;
}

/* Elemento activo */
.nav-links li.current-menu-item > a,
.top-links li.current-menu-item > a {
  color: var(--red);
}
.top-links li.current-menu-item > a::after {
  background-color: var(--red);
  width: 100%;
  left: 0;
}










/* ============================================================
 * AJUSTES ESPECÍFICOS PARA DESKTOP PEQUEÑO Y TABLET (MacBook 13" / iPad Pro)
 * Pantallas entre 1024px y 1440px
 * ============================================================ */
@media (min-width: 1025px) and (max-width: 1440px) {
  
  /* 1. Ajustes del HERO (Home) */
  .hero-copy {
    top: 60px;
    left: 6%;
  }
  .hero-title {
    font-size: 42px; /* Un poco más pequeño para que no ocupe tanto alto */
  }
  .hero-live {
    font-size: 75px;
    margin-bottom: 30px;
  }
  .hero-copy p {
    max-width: 450px;
    font-size: 13px;
  }

  /* 2. Barra Superior (Header) */
  .topbar {
    padding: 0 20px;
    gap: 15px;
  }
  .top-links {
    font-size: 16px; /* Reducimos un pelín la letra del menú */
    gap: 15px;
  }
  .center-logo {
    max-height: 40px;
  }

  /* 3. Sección "Sobre nosotros" (About) */
  .about {
    height: auto; /* Permitimos que crezca si es necesario */
    min-height: 420px;
  }
  .about-content {
    padding: 25px;
  }
  .section-title {
    font-size: 40px; /* Ajustamos el título */
  }

  /* 4. Grids de 3 columnas (Carta, Eventos, Promociones) */
  .carta-grid-container,
  .eventos-grid,
  .promo-grid-layout {
    gap: 20px; /* Reducimos el espacio entre tarjetas para que quepan mejor */
    padding: 40px 4%;
  }
  
  .carta-title,
  .evento-title,
  .promo-title {
    font-size: 1.8rem; /* Títulos un poco más contenidos */
  }

  /* 5. Carrusel de Platos (Home) */
  .dish {
    height: 290px; /* Reducimos la altura para que no se coma la pantalla */
  }
  .dish-info strong {
    font-size: 20px;
  }

  /* 6. Página de Take Away y Delivery */
  .takeaway-title h1 {
    font-size: 3.8rem;
  }
  .takeaway-card {
    padding: 40px 25px;
  }
  .delivery-card .delivery-content {
    padding: 25px 15px 15px;
  }

  /* 7. Página de la Carta (Platos por familia) */
  .platos-grid {
    grid-template-columns: repeat(4, 1fr); /* Forzamos 4 columnas en este tamaño */
  }
  .plato-img-wrapper {
    height: 150px;
  }

  /* 8. Sección Final (CTA) */
  .final-title {
    font-size: 3rem;
  }
  .final-section--evento .final-title {
    font-size: 3.8rem;
  }

}


/* ============================================================
 * FIX ESPECÍFICO PARA LA SECCIÓN DE EVENTOS (Home) EN MACBOOK 13"
 * ============================================================ */
@media (min-width: 1025px) and (max-width: 1440px) {
  
  /* Damos más espacio horizontal a la columna del texto */
  .event-section {
    grid-template-columns: 45% 55% !important; 
  }

  .event-copy {
    padding: 20px 20px 15px 30px !important;
  }

  /* Forzamos a que el texto no se rompa y ajustamos el tamaño para que quepa */
  .event-copy .section-title {
    font-size: 42px !important; /* Un pelín más pequeño para que quepa en una línea */
    white-space: nowrap; /* Obliga a que "NOSOTROS DESDE 25 €" no baje de línea */
  }
  
  /* Ajustamos el párrafo para que respire mejor */
  .event-copy p {
    max-width: 100%;
    margin-top: 15px;
  }
}