/* =========================================================
   RESPONSIVE PREMIUM CAFETERÍAS
========================================================= */

@media (max-width:768px){

body{
    background:#f5f6fa;
}

/* =================================================
   OCULTAR ELEMENTOS PESADOS
================================================= */

.gallery-wrapper,
.special-dishes,
.restaurant-features{
    display:none !important;
}

/* =================================================
   CARD PRINCIPAL
================================================= */

.restaurant-card{
    background:#fff;
    border-radius:35px;
    padding:22px;
    margin-bottom:35px;
    box-shadow:
    0 10px 35px rgba(0,0,0,.08);
    overflow:hidden;
    position:relative;
}

/* EFECTO SUAVE */

.restaurant-card::before{
    content:"";
    position:absolute;
    top:-80px;
    right:-80px;
    width:180px;
    height:180px;
    background:rgba(89,84,213,.06);
    border-radius:50%;
}

/* =================================================
   LOGO
================================================= */

.restaurant-logo-mobile{
    display:flex;
    justify-content:center;
    margin-bottom:18px;
    position:relative;
    z-index:2;
}

.restaurant-logo-mobile img{
    width:210px;
    border-radius:28px;
    cursor:pointer;
    transition:.35s ease;
    box-shadow:
    0 12px 30px rgba(0,0,0,.12);
}

.restaurant-logo-mobile img:hover{
    transform:scale(1.03);
}

/* OCULTAR BANNER NORMAL */

.restaurant-banner{
    display:none !important;
}

/* =================================================
   INFO
================================================= */

.restaurant-info{
    padding:0 !important;
    position:relative;
    z-index:2;
}

/* BADGE */

.restaurant-badge{
    display:table;
    margin:auto;
    background:#163447;
    color:#fff;
    padding:10px 18px;
    border-radius:50px;
    font-size:.78rem;
    font-weight:600;
    letter-spacing:.5px;
    margin-bottom:18px;
    box-shadow:
    0 6px 18px rgba(0,0,0,.08);
}

/* TITULO */

.restaurant-title{
    text-align:center;
    font-size:2.2rem;
    font-weight:800;
    color:#163447;
    margin-bottom:8px;
}

/* SUB */

.restaurant-subtitle{
    text-align:center;
    color:#6d6d6d;
    font-size:.92rem;
    margin-bottom:22px;
    line-height:1.5;

    font-weight:600; /* más delgado */
}

/* DESCRIPCIÓN */

.restaurant-description{
    background:#fafafa;
    padding:20px;
    border-radius:24px;
    margin-bottom:24px;
    border:1px solid #eee;
}

.restaurant-description p{
    text-align:center;
    font-size:.93rem;
    line-height:1.8;
    color:#555;
}
.restaurant-actions-modern{
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  align-items:center;
gap: 10px;
flex-wrap: wrap;
margin-top: 20px;
margin-top:18px;
width:100%;
}

/* BOTÓN PREMIUM MINIMALISTA */
.action-pill{
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;

  padding:10px 8px;

  background:#fff;
  color:#444;

  font-size:11.5px;
  font-weight:600;

  border-radius:30px;

  border:1px solid rgba(40,40,40,0.25);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.05),
    0 2px 8px rgba(0,0,0,0.05);

  text-decoration:none;
  transition:.25s ease;
  white-space:nowrap;
}

/* ICONO */
.action-pill i{
  color:#484848;
  font-size:14px;
}

/* HOVER MUY SUTIL */
.action-pill:hover{
  transform:translateY(-2px);
  border:1px solid rgba(40,40,40,0.4);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.1),
    0 6px 14px rgba(0,0,0,0.10);
}


.visit-phrase{
  margin-top: 12px;
  text-align: center;
}

.visit-phrase span{
  display: inline-block;
  padding: 6px 14px;
  border-radius: 30px;
  background: rgba(0,0,0,0.55);
  color: #353535;
  font-size: 13px;
  letter-spacing: 0.5px;
  backdrop-filter: blur(6px);
}

/* =================================================
   ACTION CARDS PREMIUM
================================================= */



/* CARD */
.mobile-card-action{

position:relative;

width:100%;

height:170px;

border-radius:30px;

overflow:hidden;

cursor:pointer;

box-shadow:
0 15px 35px rgba(0,0,0,.18);

transition:.4s ease;
}
/* IMG */

.mobile-card-action img{

width:100%;
height:100%;

object-fit:cover;

transition:.5s ease;
}

/* OVERLAY */

.mobile-overlay{

position:absolute;
inset:0;

background:
linear-gradient(
to top,
rgba(0,0,0,.85),
rgba(0,0,0,.30)
);

z-index:1;
}

/* TEXTO */
/* =================================================
   BADGE FLOTANTE PREMIUM
================================================= */

.mobile-card-text{

position:absolute;

top:120px;
right:14px;

z-index:5;
}


/* ICONO */
.mobile-card-text i{

font-size:.82rem;

color:#fff;
}
/* TEXTO */

.mobile-card-text span{

color:#fff;

font-size:.68rem;

font-weight:700;

letter-spacing:.5px;

text-transform:uppercase;
}

/* =================================================
   SPAN PREMIUM
================================================= */

.mobile-card-text{

background:rgba(0,0,0,.38);

backdrop-filter:blur(10px);

padding:8px 12px;

border-radius:30px;

display:flex;
align-items:center;
gap:7px;

border:1px solid rgba(255,255,255,.10);

box-shadow:
0 8px 20px rgba(0,0,0,.18);
}

/* HOVER */

.mobile-card-action:hover{

transform:translateY(-4px);
}

/* ZOOM */

.mobile-card-action:hover img{

transform:scale(1.08);
}

/* EFECTO PREMIUM */

.mobile-card-action::after{

content:"";

position:absolute;

inset:0;

border-radius:28px;

border:1px solid rgba(255,255,255,.08);

z-index:3;

pointer-events:none;
}

/* =================================================
   MODAL
================================================= */

.mobile-modal{
    display:none;
    position:fixed;
    z-index:999999;
    inset:0;
    background:rgba(0,0,0,.85);
    padding:200px 12px;
    overflow:auto;
}

/* BANNER */

.modal-banner{
    width:100%;
    border-radius:30px;
    animation:zoom .3s ease;
}

/* ANIMACIÓN */

@keyframes zoom{

from{
    transform:scale(.9);
    opacity:0;
}

to{
    transform:scale(1);
    opacity:1;
}

}
/* =================================================
   CARRUSEL PREMIUM
================================================= */

.mobile-carousel{
    display:flex;
    gap:18px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding-bottom:15px;
    padding-top:5px;
}

/* SCROLL */

.mobile-carousel::-webkit-scrollbar{
    height:4px;
}

.mobile-carousel::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.25);
    border-radius:20px;
}

/* =================================================
   CARD
================================================= */

.carousel-card{
    position:relative;
    min-width:88%;
    height:260px;

    border-radius:30px;
    overflow:hidden;

    scroll-snap-align:center;

    box-shadow:
    0 15px 35px rgba(0,0,0,.30);

    flex-shrink:0;
}

/* =================================================
   IMAGEN
================================================= */

.carousel-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.5s ease;
}

/* ZOOM */

.carousel-card:hover img{
    transform:scale(1.05);
}

/* =================================================
   OVERLAY NEGRO PREMIUM
================================================= */

.carousel-card::before{
    content:"";
    position:absolute;
    inset:0;

    background:
    linear-gradient(
    to top,
    rgba(0, 0, 0, 0.671) 10%,
    rgba(0, 0, 0, 0.396) 45%,
    rgba(0,0,0,.10) 100%
    );

    z-index:1;
}

/* =================================================
   INFO ENCIMA DE IMAGEN
================================================= */

.carousel-info{
    position:absolute;
    left:0;
    bottom:0;
    width:100%;

    padding:22px;

    z-index:2;
}

/* TITULO */

.carousel-info h4{
    color:#fff;
    font-size:1rem;
    font-weight:700;
    margin-bottom:5px;

    text-shadow:
    0 2px 10px rgba(0,0,0,.45);
}
/* TEXTO */

.carousel-info p{
    color:rgba(255,255,255,.85);

    font-size:.75rem;
    line-height:1.5;

    margin:0;

    max-width:90%;

    text-shadow:
    0 2px 10px rgba(0,0,0,.45);
}

/* =================================================
   EFECTO PREMIUM
================================================= */

.carousel-card::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:30px;

    border:1px solid rgba(255,255,255,.08);

    z-index:3;

    pointer-events:none;
}


.mobile-carousel{
    scroll-padding-left:15px;
}

.carousel-card:first-child{
    margin-left:5px;
}


.premium-tag{

display:inline-block;

margin-bottom:10px;

background:rgba(255,255,255,.18);

backdrop-filter:blur(10px);

padding:7px 14px;

border-radius:30px;

font-size:.72rem;

font-weight:700;

color:#fff;

border:1px solid rgba(255,255,255,.15);

}

/* =================================================
   CERRAR
================================================= */

.close-mobile-modal{
    position:fixed;
    top:18px;
    right:18px;
    width:50px;
    height:50px;
    border-radius:50%;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:2rem;
    color:#111;
    z-index:9999999;
    cursor:pointer;
}

/* =================================================
   OCULTAR FRASES GRANDES
================================================= */

hr{
    width:150px !important;
}

}

/* =========================================================
   PC
========================================================= */

@media (min-width:769px){

.restaurant-logo-mobile,
.mobile-actions,
.mobile-modal{
    display:none !important;
}

}

.action-pill i{
  font-size: 16px;
}


.visit-phrase-simple{
  margin-top: 12px;
  text-align: center;
}

.visit-phrase-simple span{
  display: inline-block;
  padding: 8px 16px;
  border-radius: 30px;

  background: #fff;
  color: #434343;

  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.5px;

  border: 1px solid rgba(37, 36, 36, 0.477);

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.107);

  transition: 0.3s ease;
}

/* HOVER SUTIL PRO */
.visit-phrase-simple span:hover{
  transform: translateY(-2px);
  border-color: rgba(0,0,0,0.25);
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}

/* OCULTAR EN PC */
.visit-phrase-simple{
    display: none;
}

/* MOSTRAR SOLO EN MÓVIL */
@media (max-width: 768px){
    .visit-phrase-simple{
        display: block;
    }
}

/* =========================
   BOTONES MÓVIL
========================= */

.mobile-actions{

display:flex;
flex-wrap:wrap;

justify-content:space-between;

gap:14px;

margin-top:20px;

}

/* BOTONES */

.mobile-actions .action-pill{

display:flex;
align-items:center;
justify-content:center;
gap:8px;

height:58px;

background:#fff;

border-radius:40px;

border:1px solid rgba(0,0,0,.12);

box-shadow:
0 4px 12px rgba(0,0,0,.08);

font-size:13px;
font-weight:600;

text-decoration:none;
color:#444;

transition:.25s ease;

-webkit-tap-highlight-color:transparent;
}

/* MENÚ Y PEDIDOS */
.mobile-actions .menus-btn,
.mobile-actions .pedidos-btn{

width:48%;

}

/* UBICACIÓN ABAJO */
.mobile-actions .ubicacion-btn{

width:100%;

}

/* ICONOS */

.mobile-actions .action-pill i{
font-size:18px;
}

/* COLORES */

.mobile-actions .menus-btn i{
color:#e53935;
}

.mobile-actions .pedidos-btn i{
color:#25d366;
}

.mobile-actions .ubicacion-btn i{
color:#1a73e8;
}

/* OCULTAR BOTONES PC EN MÓVIL */

@media(max-width:768px){

.desktop-buttons{
display:none !important;
}

}

@media (max-width:768px){

.intro-content h2{
    font-size: 2.1rem;
    line-height: 1.1;
    letter-spacing: 1px;
    padding: 0 10px;
}

.intro-content .lead{
    font-size: 1.1rem;
    line-height: 1.5;
    padding: 0 15px;
}

.intro-content hr{
    width: 180px !important;
    margin-top: 10px;
}

}

@media (max-width:768px){

.mobile-buttons{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:12px !important;
}

.mobile-buttons .menus-btn{
    width:auto !important;
}

.mobile-buttons .pedidos-btn{
    width:auto !important;
}

.mobile-buttons .ubicacion-btn{
    grid-column:1 / 3 !important;
    width:auto !important;
}

}