/* ═══════════════════════════════════════════════════════════
   MONGE CATERING — Capa moderna (hero inmersivo + editorial)
   Colores Opción C: blanco, texto fuerte, dorado brillante
   ═══════════════════════════════════════════════════════════ */
:root{
  --ink:#141210; --gold:#C8952F; --gold2:#E0A94A;
  --line:#EAE3D5; --muted:#6B6154; --bg:#FFFFFF; --cream:#FAF7F1;
}
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;0,9..144,900;1,9..144,500;1,9..144,600&family=Inter:wght@300;400;500;600;700;800&display=swap');

html{ color-scheme:light!important; }
body{ background:var(--bg); color:#141210; font-family:'Inter',sans-serif; -webkit-font-smoothing:antialiased; }

/* ── NAV (banda blanca, letras negras, fuerte) ── */
nav#navbar{ background:rgba(255,255,255,0.97)!important; backdrop-filter:blur(12px); border-bottom:1px solid var(--line)!important; box-shadow:0 2px 16px rgba(20,18,16,.06)!important; padding:1.1rem 3rem!important; }
.nav-links a{ font-family:'Cinzel',serif!important; font-weight:700!important; font-size:.9rem!important; letter-spacing:.08em!important; color:#000000!important; text-transform:uppercase!important; }
.nav-links a:hover{ color:var(--gold)!important; }
.nav-cta{ background:#000000!important; color:#fff!important; font-family:'Inter',sans-serif!important; font-weight:800!important; font-size:.95rem!important; letter-spacing:.03em!important; border-radius:100px!important; clip-path:none!important; box-shadow:0 6px 18px rgba(20,18,16,.2)!important; animation:none!important; text-transform:none!important; padding:.85rem 1.7rem!important; }
.nav-cta:hover{ background:var(--gold)!important; color:#000000!important; transform:none!important; }
.blood-drip-top{ height:3px!important; background:linear-gradient(90deg,var(--gold),var(--gold2),var(--gold))!important; box-shadow:none!important; }

/* ── HERO INMERSIVO ── */
#hero{ position:relative; min-height:92vh; display:flex; align-items:flex-end; padding:3rem; overflow:hidden; background:#0b0806!important; }
.hero-bgimg{ position:absolute; inset:0; background:url('../images/hero_bg.jpg') center/cover no-repeat; transform:scale(1.03); animation:heroZoom 18s ease-in-out infinite alternate; }
@keyframes heroZoom{ from{transform:scale(1.03)} to{transform:scale(1.12)} }
.hero-scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,8,5,.45) 0%, rgba(10,8,5,.2) 35%, rgba(10,8,5,.55) 70%, rgba(10,8,5,.9) 100%); }
.hero-seal{ position:absolute; top:6.5rem; right:3rem; width:118px; height:118px; border-radius:50%; box-shadow:0 12px 34px rgba(0,0,0,.4); z-index:4; }
.hero-content{ position:relative; z-index:3; width:100%; max-width:1300px; margin:0 auto; }
.hero-kick{ display:flex; align-items:center; gap:.8rem; font-family:'Inter',sans-serif; font-size:.72rem; font-weight:900; letter-spacing:.24em; text-transform:uppercase; color:var(--gold2); margin-bottom:1.1rem; text-shadow:0 0 .4px currentColor; }
.hero-kick::before{ content:''; width:34px; height:1px; background:var(--gold2); }
.hero-name{ font-family:'Fraunces',serif!important; font-weight:900!important; font-size:clamp(3.2rem,9vw,7.2rem)!important; line-height:.88!important; letter-spacing:-.03em!important; color:#fff!important; margin:0!important; animation:none!important; opacity:1!important; }
.hero-name .blood-word{ display:block; font-style:italic; font-weight:600; color:var(--gold2)!important; }
.hero-bottom{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap; margin-top:1.6rem; }
.hero-desc{ max-width:400px; color:rgba(255,255,255,.9)!important; font-size:1rem!important; line-height:1.65!important; margin:0!important; opacity:1!important; animation:none!important; }
.hero-btns{ display:flex; gap:.7rem; margin:0!important; opacity:1!important; animation:none!important; }
.btn-blood{ background:#000000!important; color:#FFFFFF!important; font-family:'Inter',sans-serif!important; font-weight:700!important; font-size:.9rem!important; letter-spacing:.02em!important; padding:.95rem 1.7rem!important; border-radius:100px!important; clip-path:none!important; box-shadow:none!important; text-transform:none!important; }
.btn-blood::before{ display:none!important; }
.btn-blood:hover{ background:#C8952F!important; color:#000000!important; transform:translateY(-2px)!important; box-shadow:0 10px 24px rgba(0,0,0,.25)!important; }
.btn-ghost{ background:rgba(255,255,255,.12)!important; backdrop-filter:blur(6px); color:#fff!important; font-family:'Inter',sans-serif!important; font-weight:600!important; font-size:.9rem!important; padding:.95rem 1.7rem!important; border:1px solid rgba(255,255,255,.35)!important; border-radius:100px!important; clip-path:none!important; text-transform:none!important; }
.btn-ghost:hover{ background:rgba(255,255,255,.22)!important; color:#fff!important; border-color:#fff!important; transform:translateY(-2px)!important; box-shadow:none!important; }

/* ── TÍTULOS DE SECCIÓN (editorial) ── */
.sec-label{ font-family:'Inter',sans-serif!important; font-weight:900!important; font-size:.72rem!important; letter-spacing:.22em!important; text-transform:uppercase; color:var(--gold)!important; text-shadow:0 0 .4px currentColor; }
.sec-title{ font-family:'Fraunces',serif!important; font-weight:900!important; letter-spacing:-.02em!important; color:#141210!important; }
.sec-title span{ color:var(--gold)!important; font-style:italic; font-weight:900; text-shadow:0 0 .4px currentColor; }
h2,h3{ font-family:'Fraunces',serif; }

/* ── SECCIONES claras ── */
#disenos{ background:var(--bg)!important; }
#artista{ background:var(--cream)!important; }
#estilos{ background:var(--bg)!important; }
#reservar{ background:var(--cream)!important; }
#contacto{ background:var(--bg)!important; }

/* ── TARJETAS DE MENÚ (foto grande, overlay) ── */
.diseno-card{ border:none!important; border-radius:16px!important; overflow:hidden!important; box-shadow:0 8px 26px rgba(60,45,20,.08)!important; background:#fff!important; }
.diseno-img-container{ aspect-ratio:4/5!important; }
.diseno-cat-label{ font-family:'Inter',sans-serif!important; font-weight:900!important; letter-spacing:.14em!important; }
.diseno-nombre,.diseno-card .diseno-nombre{ font-family:'Fraunces',serif!important; font-weight:700!important; }

/* ── BOTONES generales dorados ── */
.dbtn-ver,.modal-cta-primary{ background:#141210!important; color:#fff!important; border-radius:100px!important; clip-path:none!important; box-shadow:none!important; font-family:'Inter',sans-serif!important; font-weight:600!important; }
.dbtn-ver:hover,.modal-cta-primary:hover{ background:var(--gold)!important; color:#141210!important; }

/* ── FOOTER oscuro (mantiene) ── */
.footer-pro{ background:var(--ink)!important; }

/* ── RESPONSIVE hero ── */
@media(max-width:760px){
  /* El logo circular (badge que "cuelga" del navbar) se monta sobre el
     titulo si el hero no deja suficiente aire arriba en celular. */
  #hero{ padding:7rem 1.4rem 2rem; min-height:88vh; }
  .hero-seal{ width:84px; height:84px; top:5rem; right:1.4rem; }
  .hero-bottom{ flex-direction:column; align-items:flex-start; gap:1.2rem; }
  .hero-btns{ width:100%; }
  .btn-blood,.btn-ghost{ flex:1; text-align:center; }
}

/* footer dark enforce */
footer.footer-pro{ background:#141210!important; color:#EFE7D5!important; }
footer.footer-pro .footer-desc,
footer.footer-pro .footer-links a,
footer.footer-pro .footer-links li{ color:#C9BFAE!important; }
footer.footer-pro .footer-col-title,
footer.footer-pro .footer-tagline,
footer.footer-pro .fl-Gonzalez{ color:var(--gold2)!important; font-weight:900!important; text-shadow:0 0 .4px currentColor; }
footer.footer-pro .fl-gabo{ color:#fff!important; }

/* ═══════════════════════════════════════════════════════════
   ALINEAR SITIO REAL CON LA MAQUETA (dorado potente, tarjetas foto)
   Estas reglas ganan por !important y por ir al final del archivo.
   ═══════════════════════════════════════════════════════════ */

/* Beige apagado -> blanco limpio y crema muy sutil */
#disenos, #estilos, #contacto, #mascaras{ background:#FFFFFF!important; }
#artista, #reservar, #reservacion{ background:#FAF7F1!important; }

/* Título de sección estilo maqueta (Fraunces + dorado itálico) */
.sec-title{ font-family:'Fraunces',serif!important; font-weight:900!important; letter-spacing:-.02em!important; color:#141210!important; }
.sec-title span{ color:var(--gold)!important; font-style:italic!important; font-weight:900!important; text-shadow:0 0 .4px currentColor; }

/* ── TARJETA DE MENÚ = foto grande con overlay (idéntico a la maqueta) ── */
.disenos-grid, #disenosGrid{ display:grid!important; grid-template-columns:repeat(3,1fr)!important; gap:1.4rem!important; }
.diseno-card{
  position:relative!important; border:none!important; border-radius:16px!important;
  overflow:hidden!important; aspect-ratio:3/4!important; cursor:pointer!important;
  box-shadow:0 8px 26px rgba(60,45,20,.10)!important; background:#111!important;
  display:block!important; clip-path:none!important;
}
.diseno-blood-corner{ display:none!important; }
.diseno-img-container{ position:absolute!important; inset:0!important; aspect-ratio:auto!important; height:100%!important; width:100%!important; margin:0!important; border:none!important; }
.diseno-img{ width:100%!important; height:100%!important; object-fit:cover!important; transition:transform .5s!important; }
.diseno-card:hover .diseno-img{ transform:scale(1.06)!important; }
/* overlay oscuro fijo abajo para leer el texto */
.diseno-img-container::after{
  content:''!important; position:absolute!important; inset:0!important;
  background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(10,8,5,.86) 100%)!important; z-index:1!important;
}
.diseno-overlay,.diseno-hover-info{ display:none!important; }
/* cuerpo del texto encima de la foto */
.diseno-card-body{
  position:absolute!important; left:0!important; right:0!important; bottom:0!important;
  z-index:2!important; background:transparent!important; padding:1.4rem!important; border:none!important;
}
.diseno-cat-label{
  display:inline-block!important; font-family:'Inter',sans-serif!important; font-weight:700!important;
  font-size:.6rem!important; letter-spacing:.14em!important; text-transform:uppercase!important;
  color:#141210!important; background:var(--gold2)!important; padding:.3rem .6rem!important;
  border-radius:100px!important; margin-bottom:.5rem!important;
}
.diseno-nombre{ font-family:'Fraunces',serif!important; font-weight:700!important; font-size:1.4rem!important; line-height:1.05!important; color:#fff!important; margin:0!important; }
.diseno-estilo-tag{ display:none!important; }
.diseno-historia-preview{ color:rgba(255,255,255,.85)!important; font-size:.8rem!important; line-height:1.4!important; margin:.35rem 0 0!important; }
.diseno-footer-card{ margin-top:.7rem!important; padding:0!important; border:none!important; }
.dbtn-ver{
  background:rgba(255,255,255,.16)!important; backdrop-filter:blur(6px)!important;
  color:#fff!important; border:1px solid rgba(255,255,255,.4)!important; border-radius:100px!important;
  font-family:'Inter',sans-serif!important; font-weight:600!important; font-size:.78rem!important;
  padding:.55rem 1rem!important; clip-path:none!important; box-shadow:none!important; width:auto!important;
}
.dbtn-ver:hover{ background:#fff!important; color:#141210!important; }
.diseno-nuevo-badge{
  background:var(--gold2)!important; color:#141210!important; font-family:'Inter',sans-serif!important;
  font-weight:700!important; letter-spacing:.1em!important; border-radius:100px!important;
  clip-path:none!important; padding:.3rem .7rem!important; font-size:.6rem!important; z-index:3!important;
}

@media(max-width:860px){
  .disenos-grid,#disenosGrid{ grid-template-columns:1fr 1fr!important; }
}
@media(max-width:520px){
  .disenos-grid,#disenosGrid{ grid-template-columns:1fr!important; }
}

/* ═══════════════════════════════════════════════════════════
   CONSISTENCIA FUERTE — quitar cremas apagados
   Ritmo: BLANCO limpio  ↔  BANDA OSCURA carbón (como hero/footer)
   ═══════════════════════════════════════════════════════════ */

/* Nada de crema apagado. Chef y "cotizá personalizado" -> banda OSCURA con dorado */
#artista{ background:#141210!important; color:#F4ECDC!important; }
#artista .sec-label, #artista .sec-title span, #artista .astat-num{ color:var(--gold2)!important; }
#artista .sec-title, #artista h2, #artista h3{ color:#fff!important; }
#artista p, #artista .artista-bio, #artista .artista-desc{ color:rgba(244,236,220,.82)!important; }
#artista .astat-lbl{ color:rgba(244,236,220,.6)!important; }
/* marco de foto del chef en banda oscura */
#artista .artista-frame, #artista .artista-photo-wrap{ border-color:var(--gold)!important; background:#1f1a14!important; }

/* Sección "eventos/estilos" (tipos de evento) -> BLANCO limpio, chips fuertes */
#estilos{ background:#FFFFFF!important; border-top:1px solid #EFE7D5!important; }
.estilo-card{ background:#FFFFFF!important; border:1px solid #ECE2CE!important; box-shadow:0 4px 14px rgba(60,45,20,.05)!important; }
.estilo-featured{ background:#141210!important; border-color:#141210!important; }
.estilo-featured .estilo-name{ color:#fff!important; }
.estilo-featured .estilo-num{ color:var(--gold2)!important; font-weight:900!important; text-shadow:0 0 .4px currentColor; }
.estilo-featured .estilo-tag{ color:var(--gold2)!important; font-weight:900!important; text-shadow:0 0 .4px currentColor; }
.estilo-featured::before{ background:linear-gradient(var(--gold),var(--gold2))!important; }

/* Cotizá tu evento (agendar/calendario) -> BANDA OSCURA + cajas BLANCAS (mixto) */
#reservar{ background:#141210!important; color:#F4ECDC!important; }
#reservar .sec-label{ color:var(--gold2)!important; font-weight:900!important; font-size:.8rem!important; text-shadow:0 0 .4px currentColor; }
#reservar .sec-title, #reservar h2, #reservar h3{ color:#fff!important; font-weight:900!important; }
#reservar .sec-title span{ color:var(--gold2)!important; font-weight:900!important; text-shadow:0 0 .4px currentColor; }
#reservar .sec-sub{ color:rgba(244,236,220,.85)!important; font-weight:700!important; }
/* labels e inputs viven DENTRO de las cajas blancas -> texto oscuro marcado */
#reservar label, #reservar .flabel{ color:var(--gold)!important; font-weight:900!important; text-shadow:0 0 .4px currentColor; }
#reservar input, #reservar select, #reservar textarea,
#reservar .finput, #reservar .fselect, #reservar .ftextarea{
  background:#FAF7F1!important; border:1px solid rgba(200,149,47,.4)!important;
  color:#000000!important; font-weight:500!important; border-radius:10px!important;
}
#reservar input::placeholder, #reservar textarea::placeholder{ color:var(--muted)!important; font-weight:400!important; }
/* calendario y formulario: cajas BLANCAS flotando sobre la banda oscura */
#reservar .calendar-box, #reservar .booking-form-box{
  background:#FFFFFF!important; border:1px solid var(--line)!important; border-radius:16px!important;
  box-shadow:0 14px 40px rgba(0,0,0,.4)!important;
}
#reservar .calendar-box p, #reservar .booking-form-box p{ color:var(--muted)!important; font-weight:600!important; }
#reservar .cal-day{ color:#000000!important; font-weight:800!important; }
#reservar .cal-day:hover, #reservar .cal-day.selected{ background:var(--gold)!important; color:#fff!important; }
#reservar .btn-blood, #reservar .booking-submit, #reservar button[type=submit]{
  background:linear-gradient(90deg,var(--gold),var(--gold2))!important; color:#fff!important; border-radius:100px!important; clip-path:none!important;
}

/* Cotizá personalizado (dentro de #disenos, la parte clara con formulario) */
.custom-cotiz, .cotiz-custom, #cotizarCustom{ }
/* El bloque "COTIZÁ TU MENÚ PERSONALIZADO" queda en blanco pero con caja fuerte */
.custom-form-box, .cotiz-form, .upload-box{
  background:#FFFFFF!important; border:1px solid #ECE2CE!important; border-radius:16px!important;
  box-shadow:0 8px 26px rgba(60,45,20,.08)!important;
}

/* Contacto -> BLANCO limpio */
#contacto{ background:#FFFFFF!important; }

/* Stats de "500+ / 10+ / 100%" siempre con dorado fuerte */
.astat-num, .stat-num, .port-stat-num{ color:var(--gold)!important; font-family:'Fraunces',serif!important; font-weight:900!important; text-shadow:0 0 .4px currentColor; }

/* Detalles decorativos (gotas doradas) más sutiles para no ensuciar */
.blood-decoration, .blood-drop, .deco-drip{ opacity:.25!important; }

/* ═══════════════════════════════════════════════════════════
   AJUSTES PEDIDOS: logo en nav, menú centrado+fuerte, botones,
   calendario integrado a banda oscura, CTA reforzado
   ═══════════════════════════════════════════════════════════ */

/* ── NAV con LOGO a la izquierda ── */
nav#navbar{ display:flex!important; align-items:center!important; justify-content:space-between!important; }
.nav-logo{ display:flex; align-items:flex-start; flex-shrink:0; }
.nav-logo img{ height:140px; width:140px; border-radius:50%; box-shadow:0 8px 22px rgba(20,18,16,.35); transition:transform .3s; margin-top:-10px; margin-bottom:-64px; position:relative; z-index:2; }
.nav-logo img:hover{ transform:scale(1.06); }
/* el logo sobresale del nav a propósito (mitad en el nav, mitad en el header, tipo sello premium) */
nav#navbar{ padding-top:.7rem!important; padding-bottom:.7rem!important; }
.nav-links{ margin:0 auto; }  /* centra los enlaces entre logo y CTA */

/* ── CTA "Cotizar evento" REFORZADO (nav) ── */
.nav-cta{
  background:var(--gold)!important; color:#141210!important;
  font-family:'Inter',sans-serif!important; font-weight:700!important;
  font-size:.86rem!important; letter-spacing:.02em!important; text-transform:none!important;
  padding:.8rem 1.6rem!important; border-radius:100px!important; clip-path:none!important;
  box-shadow:0 6px 18px rgba(200,149,47,.35)!important; animation:none!important;
}
.nav-cta:hover{ background:#141210!important; color:#fff!important; transform:translateY(-2px)!important; }

/* ── MENÚS: encabezado premium, centrado por flexbox (a prueba de bugs de wrap) ── */
#disenos .disenos-header{
  display:flex!important; flex-direction:column!important; align-items:center!important;
  text-align:center!important; max-width:640px; margin:0 auto 2.8rem!important;
}
#disenos .disenos-header .sec-label{
  display:inline-flex!important; align-items:center; gap:.5rem;
  color:var(--gold)!important; background:rgba(224,169,74,.14); padding:.5rem 1.1rem;
  border-radius:100px; margin:0;
}
#disenos .disenos-header .disenos-title{
  font-family:'Fraunces',serif; font-weight:900; letter-spacing:-.02em;
  font-size:clamp(2.6rem,6vw,4.6rem); line-height:1.05; text-align:center; margin:.8rem 0 0;
  color:#141210;
}
#disenos .disenos-header .disenos-title span{ color:#C8952F; font-style:italic; }
#disenos .disenos-header p{
  text-align:center!important; margin:1rem 0 0; max-width:480px;
  color:#6E6350!important; font-size:1.02rem!important; line-height:1.65;
}
#disenos .disenos-header::after{
  content:''; display:block; width:74px; height:3px; margin:1.5rem auto 0; border-radius:3px;
  background:linear-gradient(90deg,transparent,var(--gold),var(--gold2),var(--gold),transparent);
  background-size:200% 100%; animation:disenosShine 3s ease-in-out infinite;
}
@keyframes disenosShine{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }

/* ── TARJETAS de menú MÁS GRANDES / destacadas ── */
.disenos-grid, #disenosGrid{ gap:1.8rem!important; max-width:1240px; margin:0 auto!important; }
.diseno-card{ aspect-ratio:4/5!important; box-shadow:0 14px 40px rgba(60,45,20,.16)!important; }
.diseno-nombre{ font-size:1.7rem!important; }
.diseno-cat-label{ font-size:.66rem!important; }
.diseno-card-body{ padding:1.7rem!important; }

/* ── BOTONES BLANCOS VACÍOS del hero: forzar texto visible ── */
#hero .btn-blood{
  background:#fff!important; color:#141210!important;
  font-family:'Inter',sans-serif!important; font-weight:700!important; font-size:.92rem!important;
}
#hero .btn-blood::before,#hero .btn-blood::after{ display:none!important; content:none!important; }
#hero .btn-ghost{ color:#fff!important; }
/* asegurar que el texto de los botones no sea transparente por gradientes viejos */
#hero .btn-blood, #hero .btn-ghost, .nav-cta{ -webkit-text-fill-color:currentColor!important; background-clip:border-box!important; -webkit-background-clip:border-box!important; }

/* ── CALENDARIO en caja BLANCA sobre la banda oscura, letras marcadas ── */
#reservar .calendar-box,
#reservar .cal-wrap, #reservar .calendar, #reservar #calendario, #reservar .booking-calendar{
  background:#FFFFFF!important; border:1px solid var(--line)!important;
  border-radius:16px!important; color:#141210!important;
}
#reservar .cal-header, #reservar .cal-title, #reservar .cal-month{ color:#000000!important; font-weight:800!important; }
#reservar .cal-nav, #reservar .cal-prev, #reservar .cal-next, #reservar .cal-arrow{
  background:rgba(200,149,47,.12)!important; color:var(--gold)!important; border:1px solid rgba(200,149,47,.4)!important; border-radius:8px!important;
}
#reservar .cal-dow, #reservar .cal-weekday{ color:var(--muted)!important; font-weight:800!important; }
#reservar .cal-day, #reservar .cal-cell, #reservar td{ color:#000000!important; font-weight:800!important; }
#reservar .cal-day.disabled, #reservar .cal-day.empty{ color:rgba(20,18,16,.3)!important; }
#reservar .cal-day:hover:not(.disabled),
#reservar .cal-day.selected, #reservar .cal-day.active{
  background:var(--gold)!important; color:#fff!important; border-radius:8px!important;
}
/* inputs dentro de la caja blanca del formulario */
#reservar input, #reservar select, #reservar textarea{
  background:#FAF7F1!important; color:#000000!important; font-weight:500!important;
  border:1px solid rgba(200,149,47,.4)!important; border-radius:10px!important;
}
#reservar select option{ background:#FFFFFF!important; color:#000000!important; font-weight:400!important; }

/* ── CTA "ENVIAR SOLICITUD" del formulario: fuerte y centrado ── */
#reservar .btn-blood, #reservar button[type=submit], #reservar .booking-submit{
  background:linear-gradient(90deg,var(--gold),var(--gold2))!important; color:#fff!important;
  font-weight:700!important; border-radius:100px!important; box-shadow:0 8px 24px rgba(200,149,47,.3)!important;
  /* .fsubmit (style.css) le pone borde triple + outline + sombra dura +
     padding/letra grandes, de la plantilla vieja -- se ve enorme y tosco
     comparado con los demas botones del sitio. Se pareja aca. */
  border:none!important; outline:none!important; padding:0.95rem 1.7rem!important;
  font-size:0.92rem!important; letter-spacing:0.02em!important;
}

/* Ocultar el hueco vacío junto a "Cotizar evento" del hero (segundo botón sin texto) */
#hero .hero-btns a:empty{ display:none!important; }

@media(max-width:860px){
  .nav-logo img{ height:100px; width:100px; margin-top:-6px; margin-bottom:-42px; }
  #disenos .disenos-title{ font-size:2.2rem!important; }
  .diseno-nombre{ font-size:1.4rem!important; }
}
@media(max-width:480px){
  .nav-logo img{ height:80px; width:80px; margin-top:-4px; margin-bottom:-32px; }
}

/* Calendario — clases exactas del HTML real */
#reservar .cal-weekdays{ color:var(--muted)!important; font-weight:800!important; }
#reservar .cal-weekdays span{ color:var(--muted)!important; font-weight:800!important; }
#reservar .cal-days{ color:#000000!important; }
#reservar .cal-days button, #reservar .cal-days .cal-day, #reservar .cal-days > div{
  color:#000000!important; font-weight:800!important; background:transparent!important; border-radius:8px!important;
}
#reservar .cal-days button:hover:not(:disabled),
#reservar .cal-days .selected, #reservar .cal-days .active{ background:var(--gold)!important; color:#fff!important; }
#reservar .cal-days button:disabled, #reservar .cal-days .disabled{ color:rgba(20,18,16,.3)!important; }
#reservar .time-slots, #reservar .time-label{ color:#000000!important; font-weight:700!important; }
#reservar .slots-grid button, #reservar .slot{ background:#FAF7F1!important; color:#000000!important; font-weight:700!important; border:1px solid rgba(200,149,47,.35)!important; border-radius:8px!important; }
#reservar .slots-grid button:hover, #reservar .slot.selected{ background:var(--gold)!important; color:#fff!important; }
#reservar .finput, #reservar .fselect, #reservar .ftextarea{
  background:#FAF7F1!important; color:#000000!important; font-weight:500!important;
  border:1px solid rgba(200,149,47,.4)!important; border-radius:10px!important;
}
#reservar .finput::placeholder, #reservar .ftextarea::placeholder{ color:var(--muted)!important; font-weight:400!important; }
#reservar .fselect option{ background:#FFFFFF!important; color:#000000!important; font-weight:400!important; }
#reservar .flabel{ color:var(--gold)!important; font-weight:900!important; text-shadow:0 0 .4px currentColor; }
#reservar .form-note{ color:var(--muted)!important; font-weight:600!important; }

/* ═══════════════════════════════════════════════════════════
   MODERNIZAR ESTILO TUCANCITO — hero 2 columnas + tarjeta flotante
   ═══════════════════════════════════════════════════════════ */
#hero{ align-items:center!important; }
.hero-grid{ display:grid!important; grid-template-columns:1fr!important; gap:3rem!important; align-items:center!important; width:100%; max-width:1000px; margin:0 auto; }
.hero-left{ max-width:none!important; }
.hero-name{ margin-bottom:1.2rem!important; }
.hero-desc{ max-width:460px!important; }
.hero-btns{ margin-top:1.6rem!important; }
/* mini-features bajo los botones (tipo "IA real / Frescura" del Tucancito) */
.hero-features{ display:flex; gap:.8rem; margin-top:1.8rem; flex-wrap:wrap; }
.hfeat{ display:flex; align-items:center; gap:.7rem; background:rgba(255,255,255,.08); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.14); border-radius:14px; padding:.7rem 1rem; }
.hfeat-ic{ font-size:1.3rem; }
.hfeat b{ display:block; color:#fff; font-size:.86rem; font-weight:700; }
.hfeat small{ display:block; color:rgba(255,255,255,.65); font-size:.72rem; }

/* quitar el sello viejo suelto (ahora está en el nav) */
.hero-seal{ display:none!important; }

@media(max-width:960px){
  .hero-grid{ grid-template-columns:1fr!important; gap:2rem!important; }
}

/* ═══════════════════════════════════════════════════════════
   TARJETAS ESTILO TUCANCITO — foto que "flota" sobre fondo oscuro
   La sección de menús pasa a OSCURA (sección clave)
   ═══════════════════════════════════════════════════════════ */
#disenos{ background:#FFFFFF!important; }

/* filtros como chips claros */
.filtros-disenos .filtro-btn, .disenos-filtros button, #disenos .filtro-btn{
  background:#FAF7F1!important; color:var(--muted)!important;
  border:1px solid var(--line)!important; border-radius:100px!important; clip-path:none!important;
}
.filtros-disenos .filtro-btn.active, #disenos .filtro-btn.active{
  background:var(--gold)!important; color:#fff!important; border-color:var(--gold)!important;
}

/* TARJETA: fondo oscuro, foto arriba flotando, texto abajo (NO overlay) */
.diseno-card{
  aspect-ratio:auto!important; background:#1c1712!important;
  border:1px solid rgba(255,255,255,.08)!important; border-radius:18px!important;
  overflow:hidden!important; box-shadow:0 14px 40px rgba(0,0,0,.4)!important;
  display:flex!important; flex-direction:column!important; transition:all .35s!important;
}
.diseno-card:hover{ transform:translateY(-6px)!important; border-color:rgba(224,169,74,.4)!important; box-shadow:0 24px 55px rgba(0,0,0,.55)!important; }
/* imagen arriba, altura fija, SIN overlay oscuro */
.diseno-img-container{ position:relative!important; inset:auto!important; height:210px!important; width:100%!important; flex:none!important; }
.diseno-img{ width:100%!important; height:100%!important; object-fit:cover!important; }
.diseno-img-container::after{ display:none!important; }   /* quitar overlay */
/* cuerpo abajo, texto claro sobre tarjeta oscura */
.diseno-card-body{
  position:relative!important; left:auto!important; right:auto!important; bottom:auto!important;
  background:transparent!important; padding:1.3rem!important; z-index:1!important;
}
.diseno-cat-label{
  background:transparent!important; color:var(--gold2)!important; padding:0!important;
  font-size:.64rem!important; letter-spacing:.16em!important; margin-bottom:.4rem!important;
  text-shadow:0 0 .4px currentColor;
}
.diseno-nombre{ color:#fff!important; font-size:1.35rem!important; }
.diseno-historia-preview{ color:rgba(244,236,220,.6)!important; }
.diseno-footer-card{ display:flex!important; align-items:center!important; justify-content:space-between!important; margin-top:1rem!important; gap:.8rem; }
/* precio grande estilo Tucancito */
.diseno-precio-card{ font-family:'Fraunces',serif!important; font-weight:900!important; color:var(--gold2)!important; font-size:1.3rem!important; text-shadow:0 0 .4px currentColor; }
.dbtn-ver{
  background:var(--gold2)!important; color:#141210!important; border:none!important;
  border-radius:100px!important; font-weight:700!important; font-size:.78rem!important;
  padding:.6rem 1.1rem!important; backdrop-filter:none!important;
}
.dbtn-ver:hover{ background:#fff!important; }
.diseno-nuevo-badge{ background:var(--gold2)!important; color:#141210!important; }