/* ============================================
   CALLETANO RESTAURANT - CARTA WEB (CLIENTES)
   Diseño: Playa Máncora / Colores Logo
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=Montserrat:wght@400;600;700&display=swap');

:root {
    /* Paleta Logo Calletano */
    --cyan-logo: #0ff1f3;       /* Agua / Cielo */
    --naranja-logo: #e8993d;    /* Títulos / Acentos / Atardecer */
    --amarillo-suave: #fffba4;  /* Arena / Fondo */
    --amarillo-fuerte: #f6d35f; /* Bordes / Sol */
    --blanco: #ffffff;
    
    /* Mapeo funcional */
    --color-titulo: var(--naranja-logo);
    --color-texto: #444;
    --color-precio: var(--naranja-logo);
    --bg-header-start: var(--cyan-logo);
    --bg-header-end: var(--naranja-logo); /* Efecto atardecer */
    
    /* Sombras */
    --sombra-card: 0 8px 20px rgba(232, 153, 61, 0.15);
}

/* --- CONFIGURACIÓN BASICA --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    background: linear-gradient(180deg, var(--amarillo-suave) 0%, #fffef8 100%);
    background-attachment: fixed;
    font-family: 'Montserrat', sans-serif;
    color: var(--color-texto);
    overflow-x: hidden;
}

/* --- HEADER / PORTADA --- */
.hero-header {
    position: relative;
    height: 340px;
    background: linear-gradient(180deg, var(--bg-header-start) 0%, #4dd 50%, var(--bg-header-end) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    overflow: hidden;
}

.hero-content {
    position: relative;
    z-index: 10;
    padding: 20px;
    animation: fadeInUp 1s ease;
    text-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.hero-logo {
    width: 200px;
    height: 120px;
    border-radius: 50%;
    border: 5px solid white;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    margin-bottom: 10px;
    object-fit: cover;
    background: white;
}

.hero-title {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    font-weight: 900;
    margin-bottom: 0;
    color: white;
    text-shadow: 2px 2px 0px rgba(232, 153, 61, 0.5);
}

.hero-subtitle {
    font-size: 1.1rem;
    color: #fff;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 15px;
    background: rgba(232, 153, 61, 0.8);
    padding: 5px 15px;
    border-radius: 50px;
    display: inline-block;
}

/* --- OLAS ANIMADAS --- */
.wave-container {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 80px;
    overflow: hidden; line-height: 0; z-index: 1;
}

.wave {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 100%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,50 C150,80 350,0 600,50 C850,100 1050,20 1200,50 L1200,120 L0,120 Z' fill='%23ffffff' fill-opacity='1'/%3E%3C/svg%3E");
    background-size: 1200px 100%; background-repeat: repeat-x;
}

.wave1 { opacity: 1; z-index: 3; animation: moveWave 12s linear infinite; }
.wave2 { opacity: 0.5; z-index: 2; bottom: 5px; animation: moveWave 18s linear infinite reverse; }
.wave3 { opacity: 0.2; z-index: 1; bottom: 10px; animation: moveWave 25s linear infinite; }

@keyframes moveWave {
    0% { background-position-x: 0; }
    100% { background-position-x: 1200px; }
}

/* --- BARRA DE NAVEGACIÓN --- */
.sticky-nav {
    position: sticky; top: 0; z-index: 1000;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(5px);
    border-bottom: 3px solid var(--amarillo-fuerte);
    padding: 12px 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.nav-scroll {
    display: flex; gap: 10px; overflow-x: auto; 
    padding: 0 20px; scrollbar-width: none;
}
.nav-scroll::-webkit-scrollbar { display: none; }

.nav-btn {
    white-space: nowrap; padding: 8px 20px;
    border-radius: 50px; 
    border: 2px solid var(--cyan-logo);
    color: var(--naranja-logo); font-weight: 700; font-size: 0.9rem;
    text-decoration: none; background: white; transition: 0.3s;
}
.nav-btn:hover, .nav-btn.active {
    background: var(--cyan-logo); color: white; border-color: var(--cyan-logo);
}

/* --- CONTENEDOR PRINCIPAL --- */
.main-container {
    max-width: 800px; margin: 0 auto; padding: 20px; position: relative; z-index: 2;
}
@media (max-width: 480px) { .main-container { padding: 15px 10px; } }

/* --- TARJETAS --- */
.menu-card {
    background: white; border-radius: 20px; padding: 25px; margin-bottom: 30px;
    box-shadow: var(--sombra-card); border: 2px solid var(--amarillo-suave);
    position: relative; overflow: hidden;
}
@media (max-width: 480px) { .menu-card { padding: 15px 10px; border-radius: 15px; } }

.menu-card::before {
    content: ''; position: absolute; top:0; left:0; width: 100%; height: 5px;
    background: linear-gradient(90deg, var(--cyan-logo), var(--naranja-logo));
}

.cat-title {
    font-family: 'Playfair Display', serif; font-size: 1.8rem; 
    color: var(--naranja-logo); border-bottom: 2px solid var(--amarillo-fuerte);
    margin-bottom: 20px; padding-bottom: 10px;
    display: flex; justify-content: space-between; align-items: center;
}

/* --- CABECERAS PRECIOS --- */
.price-header {
    display: flex; justify-content: flex-end;
    background: var(--amarillo-suave); padding: 8px 10px; border-radius: 8px;
    margin-bottom: 15px; gap: 5px;
}
.ph-col {
    min-width: 70px; width: 85px; text-align: right;
    font-weight: 700; font-size: 0.85rem; color: #666; text-transform: uppercase;
}
@media (max-width: 480px) {
    .ph-col { min-width: 60px; width: 70px; font-size: 0.75rem; }
    .price-header { gap: 3px; padding: 6px 5px; }
}

/* --- ITEMS --- */
.item-wrapper { margin-bottom: 18px; border-bottom: 1px dashed #eee; padding-bottom: 10px; }
.item-wrapper:last-child { border-bottom: none; margin-bottom: 0; }

.item-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px !important; }
.item-info { flex: 1; display: flex; align-items: baseline; padding-right: 15px; }
.item-name { font-weight: 700; color: #333; font-size: 1.05rem; }
.dots { flex: 1; border-bottom: 2px dotted var(--amarillo-fuerte); margin: 0 10px; position: relative; top: -5px; }

.price-wrapper { display: flex; gap: 5px; }
.price-val {
    min-width: 70px; width: 85px; text-align: right;
    font-weight: 800; color: var(--naranja-logo); font-size: 1.15rem;
}
@media (max-width: 480px) {
    .price-val { min-width: 60px; width: 70px; font-size: 1rem; }
    .price-wrapper { gap: 3px; }
}

.item-desc { font-size: 0.85rem; color: #777; font-style: italic; line-height: 1.3; padding-right: 20px; }

/* --- BOTONES FLOTANTES (FAB) --- */
.fab-container {
    position: fixed; bottom: 25px; right: 20px;
    display: flex; flex-direction: column; gap: 15px; z-index: 9999;
}
.fab {
    width: 55px; height: 55px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 1.5rem; text-decoration: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3); transition: transform 0.2s;
}
.fab:hover { transform: scale(1.1); }

.fab-wsp { background: #25d366; }
.fab-top { background: var(--cyan-logo); color: #333; }

/* NUEVO BOTÓN: VOLVER AL INICIO */
.fab-back { 
    background: var(--naranja-logo); 
    color: white;
}

/* --- DECORACIONES --- */
.deco-float {
    position: fixed; z-index: 0; opacity: 0.2;
    font-size: 3rem; animation: float 6s infinite ease-in-out; pointer-events: none;
    color: var(--naranja-logo);
}
.d1 { top: 20%; left: -10px; }
.d2 { top: 50%; right: -10px; animation-delay: 2s; color: var(--cyan-logo); }
.d3 { bottom: 15%; left: 10px; animation-delay: 4s; }
@keyframes float { 0%,100%{transform:translateY(0) rotate(0deg);} 50%{transform:translateY(-20px) rotate(10deg);} }

/* --- FOOTER --- */
footer {
    text-align: center; padding: 40px 20px;
    background: var(--naranja-logo); color: white; margin-top: 40px;
    border-top: 5px solid var(--cyan-logo);
}

@keyframes fadeInUp { from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:translateY(0);} }