/* RESET GENERAL */
* {margin:0; padding:0; box-sizing:border-box;}
body {font-family:'Oxygen', sans-serif; font-size:16px; background-color:#ffffff;}
/* HEADER / MARCA / NAVEGACIÓN */
.main-header {background-color:#f6f6f6; padding:12px 20px; display:flex; justify-content:space-between; align-items:center;
  width:100%; border:1px solid #e0e0e0; border-radius:6px 6px 0 0; flex-wrap:wrap; gap:20px;}
.area-marca {display:flex; align-items:center; gap:15px;}
.area-marca a {text-decoration:none; color:inherit;}
.logotipo {height:85px; width:auto; object-fit:contain;}
.brand-text-block {display:flex; flex-direction:column; justify-content:center;}
.font-henny {font-family:"Henny Penny"; font-size:1.9rem; color:#2F3E3F; line-height:1.1;}
.fila-cecati {display:flex; align-items:center; gap:10px; margin-top:5px;}
.logo-cecati {height:30px; width:auto; object-fit:contain;}
.brand-text-block h2 {font-size:1.1rem; color:#2F3E3F; font-weight:normal;}
.area-derecha {display:flex; align-items:center; gap:35px; flex-wrap:wrap;}
.menu-checkbox, .boton-hamburguesa {display:none;}
.navegacion {display:flex; gap:20px;}
.nav-item {display:flex; flex-direction:column; align-items:center; cursor:pointer; text-decoration:none; color:inherit;}
.nav-item i {font-size:1.6rem; color:#7d7d7d; margin-bottom:6px; transition:color .3s ease, transform .3s ease;}
.nav-item span {font-family:'Arial'; font-weight:bold; font-size:.9rem; color:#7d7d7d; transition:color .3s ease;}
.nav-item:hover i, .nav-item:hover span {color:RGB(110,16,243);}
.nav-item:hover i {transform:scale(1.15);}
.nav-item.activo i, .nav-item.activo span {color:RGB(110,16,243);}
.nav-item.activo {border-bottom:3px solid RGB(110,16,243); padding-bottom:2px;}
.info-contacto {display:flex; flex-direction:column; text-align:right;}
.telefono {font-family:'Arial'; font-size:1.4rem; color:#607d8b; margin-bottom:2px; text-decoration:none;}
.envios {font-family:'Arial'; font-size:.95rem; color:#000000; white-space:nowrap;}
.texto-comprimido {font-variant:small-caps; letter-spacing:-.05em; color:#254898 !important;}
.enlace-mosaico {text-decoration:none; display:block;}
/*MENÚ HAMBURGUESA (RESPONSIVO)*/
@media (max-width:850px) {
  .area-derecha {width:100%; justify-content:space-between; gap:15px;}
  .boton-hamburguesa {
    display:block; cursor:pointer; font-size:2.2rem;
    color:#00000093; padding-right:10px; order:2;
  }
  .info-contacto {order:1; text-align:left;}
  .navegacion {
    display:none; width:100%; flex-direction:row; justify-content:space-around;
    background-color:#ebebeb; padding:15px 0; border-radius:8px;
    margin-top:10px; order:3;
  }
  .menu-checkbox:checked ~ .navegacion {
    display:flex; animation:deslizarMenu .3s ease-in-out;
  }
  @keyframes deslizarMenu {
    from {opacity:0; transform:translateY(-10px);}
    to {opacity:1; transform:translateY(0);}
  }
}
/* HERO SECTION */
.hero-portada {
  background-image:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)), url('images/heroportada.jpg');
  background-size:cover; background-position:center; background-repeat:no-repeat;
  min-height:65vh; display:flex; justify-content:center; align-items:center;
  text-align:center; color:#ffffff; padding:20px;
}
.hero-container {max-width:800px;}
.hero-titulo {font-family:'Henny Penny'; font-size:3rem; margin-bottom:15px; text-shadow:2px 2px 4px rgba(0,0,0,.6);}
.hero-subtitulo {font-family:'Oxygen'; font-size:1.4rem; margin-bottom:30px; font-weight:300; text-shadow:1px 1px 3px rgba(0,0,0,.6);}
.btn-hero {display:inline-block; background-color:RGB(110,16,243); color:#ffffff; padding:12px 30px; font-family:'Arial';
  font-weight:bold; text-decoration:none; font-size:1.1rem; border-radius:25px; transition:background-color .3s ease, transform .2s ease;
  box-shadow:0 4px 6px rgba(0,0,0,.2);}
.btn-hero:hover {background-color:#530bc4; transform:translateY(-2px);}
/* MOSAICOS */
.seccion-mosaicos {padding:40px 20px; display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:30px; max-width:1200px; margin:0 auto;}
.mosaico {background-color:#ffffff; border-radius:10px; box-shadow:0 4px 10px rgba(0,0,0,0.1);
  overflow:hidden; transition:transform .3s ease, box-shadow .3s ease; cursor:pointer;}
.mosaico:hover {transform:translateY(-8px); box-shadow:0 8px 15px rgba(0,0,0,0.2);}
.mosaico img {width:100%; height:220px; object-fit:cover;}
.mosaico-info {padding:20px; display:flex; align-items:center; justify-content:center; gap:15px;}
.mosaico-info i {font-size:2.2rem; color:#a49eaf;}
.mosaico-info h3 {font-family:'Arial'; font-size:1.3rem; color:#000000;}
/* SECCIÓN CATEGORÍAS / PLATILLOS */
.menu-categorias {padding:50px 20px; background-color:#f9f9f9;}
.container-categorias {max-width:1400px; margin:0 auto;}
.titulo-seccion {text-align:center; font-family:'Henny Penny'; font-size:2.2rem; color:#2F3E3F; margin-bottom:10px;}
.subtitulo-seccion {text-align:center; font-family:'Oxygen'; color:#666;
  max-width:600px; margin:0 auto 40px auto; font-size:1rem; line-height:1.5;}
.platillos-container {display:grid; grid-template-columns:repeat(6,1fr); gap:20px;}
.platillo-card {background-color:#ffffff; border-radius:12px; overflow:hidden;
  box-shadow:0 4px 12px rgba(0,0,0,.06); transition:transform .3s cubic-bezier(.25,.8,.25,1), box-shadow .3s ease;
  display:flex; flex-direction:column;}
.platillo-card:hover {transform:translateY(-5px); box-shadow:0 8px 24px rgba(0,0,0,.12);}
.platillo-img-wrapper {position:relative; width:100%; height:160px; overflow:hidden;}
.platillo-img {width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.platillo-card:hover .platillo-img {transform:scale(1.08);}
.platillo-precio {position:absolute; top:10px; right:10px; background-color:#2F3E3F;
  color:#ffffff; padding:5px 12px; border-radius:20px;
  font-family:'Arial'; font-weight:bold; font-size:.9rem;
  box-shadow:0 2px 5px rgba(0,0,0,.2);}
.platillo-info {padding:15px; display:flex; flex-direction:column; flex-grow:1;}
.platillo-titulo {font-family:'Arial'; font-size:1.1rem; font-weight:bold; color:#2F3E3F; margin-bottom:8px;}
.platillo-descripcion {font-family:'Oxygen'; font-size:.85rem; color:#666; line-height:1.4;
  margin-bottom:15px; flex-grow:1; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden; min-height:4.2em;}
.btn-ordenar {background-color:RGB(110,16,243); color:#ffffff; border:none;
  padding:8px 15px; border-radius:6px; font-family:'Arial'; font-weight:bold;
  font-size:.85rem; cursor:pointer; transition:background-color .2s ease;
  display:flex; align-items:center; justify-content:center; gap:8px; margin-top:auto;}
.btn-ordenar:hover {background-color:#530bc4;}

/* GRID RESPONSIVO */
@media (max-width:1400px) {.platillos-container{grid-template-columns:repeat(4,1fr);}}
@media (max-width:900px) {.platillos-container{grid-template-columns:repeat(3,1fr);}}
@media (max-width:700px) {.platillos-container{grid-template-columns:repeat(2,1fr);}}
@media (max-width:480px) {.platillos-container{grid-template-columns:repeat(1,1fr);}}
/* ESPECIALES / CATERING */
.catering-menu-grid {display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  gap:40px; margin-bottom:60px; background-color:#ffffff;
  padding:40px; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,.06);}
.catering-categoria {font-family:'Henny Penny'; color:RGB(110,16,243);font-size:1.5rem; margin-bottom:20px;
  border-bottom:2px dashed #e0e0e0; padding-bottom:10px;}
.catering-lista {list-style:none;}
.catering-lista li {margin-bottom:18px;}
.catering-lista strong {font-family:'Arial'; color:#2F3E3F; font-size:1.05rem;}
.catering-lista p {font-family:'Oxygen'; color:#666; font-size:.85rem; margin-top:4px; line-height:1.4;}

.contenedor-formulario {
  max-width:800px; margin:0 auto; background-color:#ffffff;
  padding:40px; border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
}
.formulario-catering {display:flex; flex-wrap:wrap; gap:20px; text-align:left;}
.form-grupo {display:flex; flex-direction:column; width:100%;}
.form-mitad {width:calc(50% - 10px);}
.form-grupo label {font-family:'Arial'; font-size:.9rem; font-weight:bold; color:#2F3E3F; margin-bottom:8px;}
.form-grupo input, .form-grupo textarea {font-family:'Oxygen'; font-size:1rem; padding:12px;
  border:1px solid #ccc; border-radius:6px; background-color:#f9f9f9;
  transition:border-color .3s ease, background-color .3s ease;}
.form-grupo input:focus, .form-grupo textarea:focus {outline:none; border-color:RGB(110,16,243); background-color:#ffffff;}
.btn-form {width:100%; padding:15px; font-size:1.1rem; margin-top:10px;}
@media (max-width:600px) {
  .form-mitad {width:100%;}
  .catering-menu-grid, .contenedor-formulario {padding:20px;}
}
/* FOOTER */
.main-footer {background-color:#2F3E3F; color:#ffffff; padding:50px 20px; margin-top:20px;}
.footer-contenido {display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); gap:40px; max-width:1200px; margin:0 auto;}
.footer-columna h4 {font-family:'Arial'; font-size:1.2rem; margin-bottom:15px; color:#f6f6f6;}
.footer-columna p {font-family:'Oxygen'; font-size:1rem; line-height:1.6; margin-bottom:8px;}
.nota-footer {font-size:.85rem !important; color:#b0b0b0; margin-top:15px;}

/* MEDIA QUERIES GENERALES */
@media (max-width:480px) {
  .logotipo {height:60px;}
  .font-henny {font-size:1.5rem;}
  .main-header {padding:8px 10px;}
  .hero-portada {min-height:50vh;}
  .hero-titulo {font-size:2rem;}
  .hero-subtitulo {font-size:1.1rem; margin-bottom:20px;}
  .btn-hero {padding:10px 22px; font-size:1rem;}
}
@media (min-width:1024px) {
  .main-header {padding:15px 40px;}
}