/* ===================================================================== PAJUELA KITCHEN BAR & ROOFTOP — Hoja de estilos Diseño y desarrollo por zetah.gold --------------------------------------------------------------------- GUÍA RÁPIDA PARA EDITAR: · Colores de la marca ......... :root (más abajo) · Tipografías ................. cargadas en el (Google Fonts) · Fotos / placeholders ........ busca la clase .ph (comentarios inline) · Eventos y platos ............ se editan en script.js / HTML ===================================================================== */ /* ---------- 1. TOKENS DE MARCA ---------- */ :root{ /* Paleta conectada al logo */ --ink: #0A0F0B; /* negro elegante con tinte verde */ --ink-2: #0D160F; --forest: #0E2A1C; /* verde oscuro (paneles/cards) */ --forest-2: #12341F; --lime: #5AD16C; /* verde brillante (acento principal) */ --lime-dim: #3f9a4e; --gold: #CBA24C; /* dorado premium */ --gold-soft:#E4C98A; --cream: #F5F0E4; /* texto claro / crema */ --paper: #FBF9F1; /* fondos claros */ --muted: rgba(245,240,228,.86); /* texto secundario: blanco crema suave (SIN gris) */ --line: rgba(245,240,228,.16); /* Tipografía */ --display: 'Fraunces', Georgia, serif; --body: 'Outfit', system-ui, -apple-system, sans-serif; /* Sistema */ --maxw: 1240px; --radius: 20px; --radius-lg: 30px; --shadow: 0 30px 60px -25px rgba(0,0,0,.65); --shadow-soft: 0 20px 45px -30px rgba(0,0,0,.7); --ease: cubic-bezier(.4,.14,.2,1); --header-h: 76px; } /* ---------- 2. RESET ---------- */ *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--header-h) + 12px); } body{ font-family:var(--body); background:var(--ink); color:var(--cream); line-height:1.65; font-size:1.02rem; overflow-x:hidden; -webkit-font-smoothing:antialiased; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } ul{ list-style:none; } button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; } :focus-visible{ outline:2px solid var(--lime); outline-offset:3px; border-radius:6px; } /* ---------- 3. TIPOGRAFÍA ---------- */ h1,h2,h3,h4{ font-family:var(--display); font-weight:500; line-height:1.05; letter-spacing:-.01em; } .eyebrow{ font-family:var(--body); font-size:.74rem; font-weight:600; letter-spacing:.32em; text-transform:uppercase; color:var(--gold); display:inline-flex; align-items:center; gap:.7em; } .eyebrow::before{ content:""; width:26px; height:1px; background:var(--gold); display:inline-block; opacity:.7; } .eyebrow.center::after{ content:""; width:26px; height:1px; background:var(--gold); display:inline-block; opacity:.7; } .serif-accent{ font-style:italic; color:var(--gold-soft); } /* ---------- 4. LAYOUT ---------- */ .wrap{ width:min(var(--maxw), 92%); margin-inline:auto; } section{ position:relative; } .section-pad{ padding-block:clamp(4.5rem, 9vw, 8rem); } .stack-sm > * + *{ margin-top:1rem; } .section-head{ max-width:640px; margin-bottom:3rem; } .section-head.center{ margin-inline:auto; text-align:center; } .section-head h2{ font-size:clamp(2.1rem, 5vw, 3.4rem); margin-top:1rem; } .section-head p{ color:var(--muted); font-size:1.08rem; margin-top:1rem; } /* ---------- 5. BOTONES ---------- */ .btn{ --pad-y:.9rem; --pad-x:1.6rem; display:inline-flex; align-items:center; justify-content:center; gap:.55rem; padding:var(--pad-y) var(--pad-x); border-radius:8px; /* premium: esquinas suaves, NO píldora */ font-weight:700; font-size:.82rem; letter-spacing:.09em; text-transform:uppercase; transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), color .3s, border-color .3s; white-space:nowrap; } .btn svg{ width:18px; height:18px; } .btn-primary{ background:var(--lime); color:#06210E; box-shadow:0 12px 30px -12px rgba(90,209,108,.7); } .btn-primary:hover{ transform:translateY(-3px); box-shadow:0 18px 38px -12px rgba(90,209,108,.85); } .btn-gold{ background:linear-gradient(135deg, var(--gold-soft), var(--gold)); color:#25190A; box-shadow:0 12px 30px -12px rgba(203,162,76,.6); } .btn-gold:hover{ transform:translateY(-3px); } .btn-ghost{ border:1px solid var(--line); color:var(--cream); backdrop-filter:blur(4px); } .btn-ghost:hover{ border-color:var(--lime); color:var(--lime); transform:translateY(-3px); } .btn-outline-gold{ border:1px solid var(--gold); color:var(--gold-soft); } .btn-outline-gold:hover{ background:var(--gold); color:#25190A; transform:translateY(-3px); } .btn-lg{ --pad-y:1.05rem; --pad-x:2rem; font-size:.9rem; } /* ---------- 6. HEADER / NAV ---------- */ .site-header{ position:fixed; inset:0 0 auto 0; z-index:100; height:var(--header-h); display:flex; align-items:center; transition:background .4s var(--ease), border-color .4s, backdrop-filter .4s; border-bottom:1px solid transparent; } .site-header.scrolled{ background:rgba(8,13,9,.82); backdrop-filter:blur(14px) saturate(1.2); border-bottom-color:var(--line); } .nav{ width:min(var(--maxw), 94%); margin-inline:auto; display:flex; align-items:center; justify-content:space-between; gap:1rem; } /* Logo (imagen real circular) — tamaño controlado */ .brand{ display:flex; align-items:center; gap:.7rem; z-index:2; } .brand .mark{ width:62px; height:62px; flex:none; /* HEADER: entre 60px y 75px */ border-radius:50%; object-fit:cover; background:#0A0F0B; box-shadow:0 0 0 1px rgba(90,209,108,.35), 0 6px 18px -8px rgba(0,0,0,.7); } .brand .brand-txt{ display:flex; flex-direction:column; line-height:1; } .brand .brand-name{ font-family:var(--display); font-size:1.28rem; letter-spacing:.01em; } .brand .brand-sub{ font-size:.56rem; letter-spacing:.34em; text-transform:uppercase; color:var(--gold); margin-top:3px; } /* Logo dentro del hero (mediano) */ .hero-logo{ width:180px; height:180px; /* HERO: entre 150px y 220px */ border-radius:50%; object-fit:cover; display:block; margin-bottom:1.4rem; box-shadow:0 0 0 2px rgba(90,209,108,.4), 0 20px 50px -18px rgba(0,0,0,.8); } .nav-links{ display:flex; align-items:center; gap:1.6rem; } .nav-links a{ font-size:.92rem; font-weight:500; color:var(--cream); white-space:nowrap; position:relative; opacity:.85; transition:opacity .25s, color .25s; } .nav-links a::after{ content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0; background:var(--lime); transition:width .3s var(--ease); } .nav-links a:hover{ opacity:1; color:var(--lime); } .nav-links a:hover::after{ width:100%; } .nav-cta{ display:flex; align-items:center; gap:.7rem; } /* Hamburguesa */ .burger{ display:none; width:44px; height:44px; border-radius:12px; border:1px solid var(--line); position:relative; z-index:120; } .burger span{ position:absolute; left:11px; right:11px; height:2px; background:var(--cream); border-radius:2px; transition:.35s var(--ease); } .burger span:nth-child(1){ top:15px; } .burger span:nth-child(2){ top:21px; } .burger span:nth-child(3){ top:27px; } .burger.open span:nth-child(1){ top:21px; transform:rotate(45deg); } .burger.open span:nth-child(2){ opacity:0; } .burger.open span:nth-child(3){ top:21px; transform:rotate(-45deg); } /* Menú móvil */ .mobile-nav{ position:fixed; inset:0; z-index:110; background:linear-gradient(160deg, var(--ink) 0%, var(--forest) 120%); display:flex; flex-direction:column; justify-content:center; gap:.4rem; padding:2rem 8%; transform:translateX(100%); transition:transform .5s var(--ease); visibility:hidden; } .mobile-nav.open{ transform:translateX(0); visibility:visible; } .mobile-nav a{ font-family:var(--display); font-size:1.9rem; padding:.5rem 0; border-bottom:1px solid var(--line); transition:color .3s, padding .3s; } .mobile-nav a:hover{ color:var(--lime); padding-left:.6rem; } .mobile-nav .m-actions{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:2rem; } /* ---------- 7. HERO ---------- */ .hero{ min-height:100svh; display:flex; align-items:center; padding-top:var(--header-h); position:relative; overflow:hidden; background:radial-gradient(120% 90% at 80% 0%, #143a26 0%, var(--ink) 55%); } /* Glow atardecer rooftop */ .hero::before{ content:""; position:absolute; z-index:0; inset:0; background: radial-gradient(60% 45% at 78% 18%, rgba(203,162,76,.28), transparent 60%), radial-gradient(50% 40% at 12% 90%, rgba(90,209,108,.18), transparent 60%); pointer-events:none; } /* Imagen de fondo del hero — REEMPLAZA la url() por foto real del rooftop */ .hero-media{ position:absolute; inset:0; z-index:0; background:linear-gradient(120deg, #10281b, #0a0f0b); opacity:.9; } .hero-media::after{ content:"Foto de ambiente / rooftop"; /* etiqueta placeholder */ position:absolute; right:24px; bottom:20px; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(228,201,138,.45); } .hero-overlay{ position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(8,13,9,.92) 0%, rgba(8,13,9,.75) 45%, rgba(8,13,9,.35) 100%); } .hero .wrap{ position:relative; z-index:2; } .hero-content{ max-width:720px; padding-block:3rem; } .hero h1{ font-size:clamp(2.9rem, 8vw, 5.6rem); margin:1.2rem 0 .3rem; } .hero h1 .line-2{ color:var(--lime); display:block; } .hero .subtitle{ font-size:clamp(1.15rem,2.6vw,1.5rem); font-family:var(--display); font-style:italic; color:var(--gold-soft); } .hero .lead{ color:var(--muted); font-size:1.12rem; max-width:560px; margin:1.4rem 0 2rem; } .hero-actions{ display:flex; flex-wrap:wrap; gap:.9rem; } .hero-tags{ margin-top:2.2rem; display:flex; align-items:center; gap:1rem; flex-wrap:wrap; font-size:.86rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); } .hero-tags .dot{ width:5px; height:5px; border-radius:50%; background:var(--lime); } /* Scroll cue */ .scroll-cue{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:.5rem; color:var(--muted); font-size:.7rem; letter-spacing:.3em; text-transform:uppercase; } .scroll-cue .bar{ width:1px; height:38px; background:linear-gradient(var(--gold), transparent); animation:cue 2s infinite; } @keyframes cue{ 0%,100%{ opacity:.3; transform:scaleY(.6); } 50%{ opacity:1; transform:scaleY(1); } } /* ---------- 8. PLACEHOLDERS DE FOTO ---------- */ /* .ph = espacio para foto real. Para usar una imagen:
*/ .ph{ position:relative; overflow:hidden; border-radius:var(--radius); background: linear-gradient(135deg, rgba(90,209,108,.10), rgba(203,162,76,.08)), var(--forest); background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); min-height:220px; isolation:isolate; } .ph::before{ /* patrón sutil */ content:""; position:absolute; inset:0; z-index:0; opacity:.5; background:radial-gradient(circle at 30% 20%, rgba(90,209,108,.12), transparent 45%); } .ph .ph-label{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:.5rem; color:rgba(228,201,138,.75); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; text-align:center; } .ph .ph-label svg{ width:26px; height:26px; opacity:.55; } /* Al poner una imagen de fondo, oculta la etiqueta */ .ph[style*="url("] .ph-label{ display:none; } .ph[style*="url("]::before{ display:none; } /* ---------- 9. SOBRE PAJUELA ---------- */ .about{ background:linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%); } .about-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; } .about-photo{ min-height:460px; box-shadow:var(--shadow); } .about-note{ margin-top:2rem; padding:1.4rem 1.6rem; border-left:3px solid var(--gold); background:rgba(203,162,76,.06); border-radius:0 14px 14px 0; color:var(--gold-soft); font-style:italic; font-family:var(--display); font-size:1.05rem; } .about-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:2.4rem; } .mini-card{ padding:1.4rem 1.2rem; border-radius:16px; background:var(--forest); border:1px solid var(--line); transition:transform .3s var(--ease), border-color .3s; } .mini-card:hover{ transform:translateY(-6px); border-color:var(--lime); } .mini-card .ic{ width:40px; height:40px; border-radius:11px; background:rgba(90,209,108,.12); display:grid; place-items:center; margin-bottom:.8rem; } .mini-card .ic svg{ width:22px; height:22px; color:var(--lime); } .mini-card h4{ font-size:1.1rem; font-family:var(--body); font-weight:600; } .mini-card p{ font-size:.86rem; color:var(--muted); margin-top:.2rem; } /* ---------- 10. EXPERIENCIA ---------- */ .experience{ background:var(--ink); } .exp-lead{ font-family:var(--display); font-size:clamp(1.5rem,3.4vw,2.3rem); line-height:1.35; max-width:960px; margin:0 auto 3.2rem; text-align:center; font-weight:400; } .exp-lead b{ color:var(--lime); font-weight:500; } .highlights{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; } .highlight{ position:relative; padding:1.8rem 1.5rem; border-radius:18px; overflow:hidden; background:linear-gradient(160deg, var(--forest) 0%, var(--forest-2) 100%); border:1px solid var(--line); transition:transform .35s var(--ease); } .highlight:hover{ transform:translateY(-8px); } .highlight::after{ content:""; position:absolute; right:-30px; top:-30px; width:120px; height:120px; border-radius:50%; background:radial-gradient(circle, rgba(90,209,108,.18), transparent 70%); } .highlight .num{ font-family:var(--display); font-size:.9rem; color:var(--gold); letter-spacing:.1em; } .highlight h3{ font-size:1.35rem; margin:.5rem 0 .3rem; font-family:var(--body); font-weight:600; } .highlight p{ font-size:.9rem; color:var(--muted); } /* ---------- 11. TEASER MENÚ (HOME) ---------- */ .menu-teaser{ background:linear-gradient(180deg, var(--ink) 0%, var(--forest) 130%); } .teaser-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; margin:3rem 0; } .dish-card{ border-radius:18px; overflow:hidden; background:var(--forest-2); border:1px solid var(--line); transition:transform .35s var(--ease), box-shadow .35s; } .dish-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-soft); } .dish-card .ph{ border-radius:0; border:none; min-height:200px; } .dish-card .dc-body{ padding:1.1rem 1.2rem 1.4rem; } .dish-card h4{ font-size:1.12rem; font-family:var(--body); font-weight:600; } .dish-card p{ font-size:.82rem; color:var(--muted); margin-top:.25rem; } .dish-card .tag{ font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); } .teaser-cta{ text-align:center; } /* ---------- 12. EVENTOS ---------- */ .events{ background:var(--ink-2); } .events-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; } .event-card{ display:flex; flex-direction:column; border-radius:20px; overflow:hidden; background:var(--forest); border:1px solid var(--line); transition:transform .35s var(--ease), border-color .35s; } .event-card:hover{ transform:translateY(-8px); border-color:var(--gold); } .event-flyer{ position:relative; min-height:300px; } .event-flyer .ph{ border-radius:0; border:none; height:100%; min-height:300px; } .event-date-badge{ position:absolute; top:14px; left:14px; z-index:2; background:rgba(8,13,9,.85); backdrop-filter:blur(6px); border:1px solid var(--line); border-radius:14px; padding:.5rem .8rem; text-align:center; line-height:1; } .event-date-badge .d{ font-family:var(--display); font-size:1.5rem; color:var(--lime); } .event-date-badge .m{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-top:4px; } .event-body{ padding:1.3rem 1.4rem 1.5rem; display:flex; flex-direction:column; gap:.5rem; flex:1; } .event-body .when{ font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); display:flex; align-items:center; gap:.4rem; } .event-body h3{ font-size:1.35rem; } .event-body p{ font-size:.9rem; color:var(--muted); flex:1; } .event-actions{ display:flex; gap:.6rem; margin-top:.6rem; flex-wrap:wrap; } .event-actions .btn{ --pad-y:.7rem; --pad-x:1.2rem; font-size:.84rem; } /* ---------- 13. GALERÍA ---------- */ .gallery{ background:var(--ink); } .gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; gap:1rem; } .g-item{ position:relative; overflow:hidden; border-radius:16px; cursor:pointer; } .g-item .ph{ height:100%; border-radius:16px; min-height:0; transition:transform .6s var(--ease); } .g-item:hover .ph{ transform:scale(1.08); } .g-item::after{ content:attr(data-cap); position:absolute; inset:0; z-index:2; display:flex; align-items:flex-end; padding:1rem; font-size:.82rem; font-weight:500; letter-spacing:.05em; background:linear-gradient(to top, rgba(8,13,9,.85), transparent 55%); opacity:0; transition:opacity .4s var(--ease); } .g-item:hover::after{ opacity:1; } .g-wide{ grid-column:span 2; } .g-tall{ grid-row:span 2; } /* ---------- 14. REDES SOCIALES ---------- */ .social{ background:linear-gradient(160deg, var(--forest) 0%, var(--ink) 100%); text-align:center; } .social-stats{ display:flex; justify-content:center; flex-wrap:wrap; gap:clamp(1.5rem,6vw,4.5rem); margin:2.6rem 0; } .stat .n{ font-family:var(--display); font-size:clamp(2.4rem,6vw,3.6rem); color:var(--lime); line-height:1; } .stat .l{ font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-top:.5rem; } .social-actions{ display:flex; justify-content:center; gap:.8rem; flex-wrap:wrap; } /* ---------- 15. UBICACIÓN Y CONTACTO ---------- */ .locate{ background:var(--ink-2); } .locate-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,3.5rem); align-items:stretch; } .contact-list{ display:flex; flex-direction:column; gap:1.2rem; margin:2rem 0; } .contact-row{ display:flex; gap:1rem; align-items:flex-start; } .contact-row .ic{ width:44px; height:44px; flex:none; border-radius:12px; background:rgba(90,209,108,.1); display:grid; place-items:center; } .contact-row .ic svg{ width:20px; height:20px; color:var(--lime); } .contact-row .c-label{ font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); } .contact-row .c-value{ font-size:1.05rem; color:var(--cream); } .contact-row a.c-value:hover{ color:var(--lime); } .locate-actions{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.5rem; } .map-panel{ border-radius:var(--radius); overflow:hidden; min-height:420px; border:1px solid var(--line); } .map-panel .ph{ height:100%; min-height:420px; border-radius:0; border:none; } .map-panel iframe{ width:100%; height:100%; min-height:420px; border:0; display:block; } /* ---------- 16. CTA FINAL ---------- */ .final-cta{ position:relative; overflow:hidden; text-align:center; background:var(--forest); } .final-cta::before{ content:""; position:absolute; inset:0; background: radial-gradient(60% 60% at 50% 0%, rgba(203,162,76,.22), transparent 60%), radial-gradient(50% 50% at 50% 100%, rgba(90,209,108,.15), transparent 60%); } .final-cta .wrap{ position:relative; z-index:1; } .final-cta h2{ font-size:clamp(2.2rem,6vw,4rem); max-width:900px; margin:1rem auto; } .final-cta p{ max-width:640px; margin:0 auto 2.2rem; color:var(--cream); opacity:.85; font-size:1.12rem; } .final-cta .cta-actions{ display:flex; justify-content:center; gap:.9rem; flex-wrap:wrap; } /* ---------- 17. FOOTER ---------- */ .site-footer{ background:var(--ink); border-top:1px solid var(--line); padding-block:3.5rem 2rem; } .footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem; margin-bottom:2.5rem; } .footer-about p{ color:var(--muted); font-size:.92rem; margin-top:1rem; max-width:340px; } .footer-col h4{ font-family:var(--body); font-weight:600; font-size:.8rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:1rem; } .footer-col a, .footer-col span{ display:block; color:var(--muted); font-size:.92rem; padding:.28rem 0; transition:color .25s; } .footer-col a:hover{ color:var(--lime); } .footer-socials{ display:flex; gap:.6rem; margin-top:1.2rem; } .footer-socials a{ width:42px; height:42px; border-radius:12px; border:1px solid var(--line); display:grid; place-items:center; transition:.3s var(--ease); } .footer-socials a:hover{ border-color:var(--lime); color:var(--lime); transform:translateY(-3px); } .footer-socials svg{ width:20px; height:20px; } .footer-bottom{ border-top:1px solid var(--line); padding-top:1.6rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; font-size:.84rem; color:var(--muted); } .footer-bottom a{ color:var(--gold-soft); } .footer-bottom a:hover{ color:var(--lime); } /* ===================================================================== PÁGINA DEL MENÚ (menu.html) ===================================================================== */ .menu-hero{ min-height:70svh; display:flex; align-items:flex-end; position:relative; overflow:hidden; padding:var(--header-h) 0 4rem; background:radial-gradient(120% 80% at 70% 0%, #143a26, var(--ink) 60%); } .menu-hero::before{ content:""; position:absolute; inset:0; background:radial-gradient(50% 50% at 82% 20%, rgba(203,162,76,.22), transparent 60%); } .menu-hero .wrap{ position:relative; z-index:2; } .menu-hero h1{ font-size:clamp(3rem,9vw,6rem); margin:1rem 0 .4rem; } .menu-hero .subtitle{ color:var(--muted); font-size:1.15rem; max-width:620px; } .menu-hero-deco{ position:absolute; z-index:1; right:4%; bottom:0; width:min(38%,420px); opacity:.9; } .menu-hero-deco .ph{ min-height:340px; border-radius:var(--radius-lg) var(--radius-lg) 0 0; box-shadow:var(--shadow); } /* Navegación interna sticky del menú */ .menu-nav{ position:sticky; top:var(--header-h); z-index:50; background:rgba(8,13,9,.9); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); } .menu-nav .track{ display:flex; gap:.5rem; overflow-x:auto; padding:.9rem 0; scrollbar-width:none; } .menu-nav .track::-webkit-scrollbar{ display:none; } .menu-nav a{ flex:none; padding:.55rem 1.1rem; border-radius:8px; font-size:.82rem; font-weight:600; letter-spacing:.04em; color:var(--muted); border:1px solid var(--line); transition:.25s var(--ease); white-space:nowrap; } .menu-nav a:hover, .menu-nav a.active{ color:#06210E; background:var(--lime); border-color:var(--lime); } /* Categoría de menú */ .menu-cat{ padding-block:clamp(3rem,6vw,5rem); scroll-margin-top:130px; } .menu-cat:nth-child(even){ background:var(--ink-2); } .cat-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:2rem; flex-wrap:wrap; } .cat-head h2{ font-size:clamp(1.8rem,4.5vw,2.8rem); } .cat-head h2 .en{ font-size:.55em; color:var(--gold); font-style:italic; font-family:var(--display); } .cat-note{ font-size:.82rem; color:var(--gold-soft); background:rgba(203,162,76,.10); padding:.4rem .9rem; border-radius:8px; border:1px solid rgba(203,162,76,.3); } /* Lista de platos (líneas con líder de puntos) */ .menu-list{ display:grid; grid-template-columns:1fr 1fr; gap:.4rem 3rem; } .menu-item{ padding:1rem 0; border-bottom:1px dashed var(--line); } .menu-item .mi-top{ display:flex; align-items:baseline; gap:.6rem; } .menu-item .mi-name{ font-family:var(--display); font-size:1.18rem; color:var(--cream); } .menu-item .mi-en{ font-size:.82rem; color:var(--muted); font-style:italic; } .menu-item .mi-dots{ flex:1; border-bottom:1px dotted rgba(245,240,228,.3); transform:translateY(-4px); } .menu-item .mi-price{ font-family:var(--display); font-size:1.15rem; color:var(--lime); white-space:nowrap; } .menu-item .mi-desc{ font-size:.86rem; color:var(--muted); margin-top:.35rem; max-width:90%; } /* Foto intercalada entre categorías */ .menu-photo-band{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin:0; padding-block:1.5rem; } .menu-photo-band .ph{ min-height:240px; } .menu-photo-band .ph.span2{ grid-column:span 2; } /* Especialidades (tarjetas premium) */ .specials{ background:linear-gradient(180deg, var(--forest) 0%, var(--ink) 100%); } .specials-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem; margin-top:2.5rem; } .special-card{ display:grid; grid-template-columns:150px 1fr; gap:1.2rem; background:var(--forest-2); border:1px solid var(--line); border-radius:20px; overflow:hidden; transition:transform .35s var(--ease), border-color .35s; } .special-card:hover{ transform:translateY(-6px); border-color:var(--gold); } .special-card .ph{ border-radius:0; border:none; min-height:100%; } .special-card .sc-body{ padding:1.4rem 1.4rem 1.4rem 0; } .special-card .sc-top{ display:flex; justify-content:space-between; align-items:baseline; gap:.6rem; } .special-card h3{ font-size:1.3rem; } .special-card .sc-price{ font-family:var(--display); color:var(--lime); font-size:1.1rem; white-space:nowrap; } .special-card p{ font-size:.88rem; color:var(--muted); margin-top:.5rem; } .special-hero{ grid-column:span 2; grid-template-columns:1fr 1fr; } .special-hero .ph{ min-height:300px; } .special-hero .sc-body{ padding:2rem; align-self:center; } .special-hero h3{ font-size:1.9rem; } /* Sección de tragos */ .drinks{ background:var(--ink); position:relative; overflow:hidden; } .drinks::before{ content:""; position:absolute; inset:0; background:radial-gradient(50% 40% at 15% 20%, rgba(203,162,76,.14), transparent 60%), radial-gradient(45% 40% at 85% 80%, rgba(90,209,108,.12), transparent 60%); } .drinks .wrap{ position:relative; z-index:1; } .drinks-note{ max-width:720px; margin:1.2rem 0 2.6rem; color:var(--muted); } .drinks-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; } .drink-card{ border-radius:18px; overflow:hidden; background:var(--forest); border:1px solid var(--line); transition:transform .35s var(--ease), border-color .35s; } .drink-card:hover{ transform:translateY(-8px); border-color:var(--gold); } .drink-card .ph{ border-radius:0; border:none; min-height:200px; } .drink-card .dr-body{ padding:1.2rem 1.3rem 1.5rem; } .drink-card h4{ font-size:1.2rem; } .drink-card p{ font-size:.86rem; color:var(--muted); margin-top:.35rem; } .drinks-coming{ text-align:center; margin-bottom:2.4rem; } .drinks-coming .badge{ display:inline-block; padding:.5rem 1.1rem; border-radius:8px; border:1px solid var(--gold); color:var(--gold-soft); font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; } .menu-back{ text-align:center; padding-block:3.5rem; background:var(--ink); } /* ---------- 18. ANIMACIONES DE ENTRADA ---------- */ .reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); } .reveal.is-visible{ opacity:1; transform:none; } .reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; } .reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; } /* Divisor botánico dorado */ .leaf-divider{ display:flex; align-items:center; justify-content:center; gap:1rem; color:var(--gold); opacity:.6; padding-block:.5rem; } .leaf-divider .rule{ height:1px; width:min(120px,20vw); background:linear-gradient(90deg, transparent, var(--gold), transparent); } .leaf-divider svg{ width:26px; height:26px; } /* ---------- 19. RESPONSIVE ---------- */ @media (max-width:1080px){ .teaser-grid{ grid-template-columns:repeat(2,1fr); } .gallery-grid{ grid-template-columns:repeat(3,1fr); } .footer-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:900px){ .nav-links{ display:none; } .nav-cta .btn:not(.always){ display:none; } .burger{ display:block; } .about-grid{ grid-template-columns:1fr; } .about-photo{ min-height:340px; order:-1; } .highlights, .events-grid, .drinks-grid{ grid-template-columns:1fr 1fr; } .locate-grid{ grid-template-columns:1fr; } .specials-grid{ grid-template-columns:1fr; } .special-hero{ grid-column:auto; grid-template-columns:1fr; } .special-card{ grid-template-columns:120px 1fr; } .menu-list{ grid-template-columns:1fr; } .menu-hero-deco{ display:none; } .menu-photo-band{ grid-template-columns:1fr 1fr; } } @media (max-width:600px){ :root{ --header-h:66px; } .brand .mark{ width:52px; height:52px; } /* logo header móvil */ .brand .brand-txt{ display:none; } /* el logo ya trae el texto */ .hero-logo{ width:130px; height:130px; } /* logo hero móvil: 120–150px */ .about-cards{ grid-template-columns:1fr; } .highlights, .events-grid, .teaser-grid, .drinks-grid, .gallery-grid{ grid-template-columns:1fr; } .gallery-grid{ grid-auto-rows:220px; } .g-wide, .g-tall{ grid-column:auto; grid-row:auto; } .footer-grid{ grid-template-columns:1fr; } .special-card{ grid-template-columns:1fr; } .special-card .ph{ min-height:200px; } .menu-photo-band{ grid-template-columns:1fr; } .menu-photo-band .ph.span2{ grid-column:auto; } .hero-actions .btn{ flex:1 1 auto; } } /* Accesibilidad: respeta reduce-motion */ @media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } .reveal{ opacity:1; transform:none; } } /* ===================================================================== MULTI-PÁGINA: páginas internas, tarjetas con FOTOS REALES ===================================================================== */ /* Estado activo del nav */ .nav-links a.current{ color:var(--lime); opacity:1; } .nav-links a.current::after{ width:100%; } /* Hero compacto para páginas internas (sobre, eventos, galería, contacto) */ .page-hero{ position:relative; overflow:hidden; padding:calc(var(--header-h) + 3.6rem) 0 3.2rem; background:radial-gradient(120% 85% at 75% 0%, #143a26, var(--ink) 62%); } .page-hero::before{ content:""; position:absolute; inset:0; background:radial-gradient(48% 45% at 82% 15%, rgba(203,162,76,.22), transparent 60%); } .page-hero .wrap{ position:relative; z-index:2; } .page-hero h1{ font-size:clamp(2.6rem,7vw,4.8rem); margin:.9rem 0 .5rem; } .page-hero .subtitle{ color:var(--cream); opacity:.92; font-size:1.15rem; max-width:640px; } /* Wrapper genérico de foto real (recorte elegante, sin deformar) */ .card-photo{ position:relative; overflow:hidden; background:var(--forest-2); } .card-photo img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease); } /* ---- Sección "Sabores que representan a Pajuela" (3 platos con foto) ---- */ .dishes-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin:3rem 0; } .dish-card .card-photo{ aspect-ratio:4/3; } .dish-card:hover .card-photo img{ transform:scale(1.06); } .dish-card .dc-body{ padding:1.3rem 1.4rem 1.6rem; } .dish-card .dc-body h4{ font-size:1.25rem; font-family:var(--display); font-weight:500; } .dish-card .dc-body p{ font-size:.9rem; color:var(--cream); opacity:.82; margin-top:.5rem; } .dish-card .tag{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:.3rem; } /* ---- Flyers de eventos con imagen real ---- */ .events-grid{ grid-template-columns:repeat(3,1fr); } .event-card .event-flyer{ position:relative; aspect-ratio:4/5; min-height:0; } .event-flyer img{ width:100%; height:100%; object-fit:cover; display:block; } .event-card:hover .event-flyer img{ transform:none; } .event-flyer .ph{ width:100%; height:100%; min-height:0; border:none; border-radius:0; } /* Tarjeta "próximamente" (evento vacío) */ .event-card.coming{ display:flex; align-items:center; justify-content:center; text-align:center; padding:0; } .event-card.coming .coming-inner{ padding:2.5rem 1.5rem; } .event-card.coming .coming-inner .ic{ width:56px; height:56px; margin:0 auto 1rem; border-radius:14px; background:rgba(203,162,76,.12); display:grid; place-items:center; } .event-card.coming .coming-inner .ic svg{ width:26px; height:26px; color:var(--gold); } .event-card.coming h3{ font-size:1.3rem; margin-bottom:.4rem; } .event-card.coming p{ color:var(--cream); opacity:.8; font-size:.9rem; } /* ---- Galería con mezcla de fotos reales y placeholders ---- */ .gallery-grid .g-item .card-photo{ height:100%; border-radius:16px; } .gallery-grid .g-item .card-photo img{ height:100%; } /* Teaser pequeño de "Sobre" en el home */ .sobre-teaser{ background:linear-gradient(160deg, var(--forest) 0%, var(--ink) 100%); } .sobre-teaser .inner{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,4rem); align-items:center; } .sobre-teaser .card-photo{ border-radius:var(--radius); aspect-ratio:5/4; box-shadow:var(--shadow); } .sobre-teaser h2{ font-size:clamp(2rem,4.6vw,3rem); margin:1rem 0; } .sobre-teaser p{ color:var(--cream); opacity:.86; font-size:1.05rem; } /* Mini galería en el home */ .gallery-mini{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin:2.6rem 0; } .gallery-mini .g-item{ aspect-ratio:1/1; border-radius:16px; overflow:hidden; } .gallery-mini .card-photo{ height:100%; } @media (max-width:900px){ .dishes-3{ grid-template-columns:1fr 1fr; } .events-grid{ grid-template-columns:1fr 1fr; } .sobre-teaser .inner{ grid-template-columns:1fr; } .sobre-teaser .card-photo{ order:-1; } .gallery-mini{ grid-template-columns:repeat(2,1fr); } } @media (max-width:600px){ .dishes-3{ grid-template-columns:1fr; } .events-grid{ grid-template-columns:1fr; } .event-card .event-flyer{ aspect-ratio:4/5; } }