/* ============================================================ FÉNIX — Estilo Global (compartido por todos los módulos) ============================================================ Mobile-first. Responsive. Sin frameworks. Usa variables CSS. El builder inyecta .sector-{tipo} en . ============================================================ */ /* ===== TEMAS POR SECTOR ===== */ /* --- TALLER (verde + naranja) --- */ .sector-taller { --primary: #2d5016; --primary-light: #3f7a1e; --primary-dark: #1e3b0e; --accent: #e87c2a; --accent-hover: #d06e1f; --bg: #f4f4f4; --bg-section: #f9f9f9; --bg-alt: #ffffff; --text: #333333; --text-light: #666666; --text-on-primary: #ffffff; --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; --header-bg: #1a1a1a; --footer-bg: #1a1a1a; --radius: 8px; --shadow: 0 2px 15px rgba(0,0,0,0.1); --section-divider-h: 4px; --section-divider-w: 60px; --section-divider-bg: var(--accent); --header-text: #ffffff; --nav-link-color: #ffffff; --nav-link-hover: var(--accent); --logo-color: var(--accent); --hero-gradient-from: #1a1a1a; --hero-gradient-to: var(--primary); --hero-text: #ffffff; --hero-btn-bg: var(--accent); --hero-btn-text: #ffffff; --hero-btn-hover: var(--accent-hover); --card-bg: #ffffff; --equipo-avatar-bg: #ddd; --equipo-avatar-color: #999; --footer-text: #ffffff; --footer-text-muted: rgba(255,255,255,0.7); } /* --- CLÍNICA (azul + blanco) --- */ .sector-clinica { --primary: #0d6efd; --primary-light: #e8f0fe; --primary-dark: #0a58ca; --accent: #00b4d8; --accent-hover: #0095b3; --bg: #f8f9fa; --bg-section: #f0f4ff; --bg-alt: #ffffff; --text: #333333; --text-light: #666666; --text-on-primary: #ffffff; --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; --header-bg: #ffffff; --footer-bg: #1a2a3a; --radius: 12px; --shadow: 0 2px 15px rgba(13,110,253,0.1); --section-divider-h: 4px; --section-divider-w: 60px; --section-divider-bg: var(--primary); --header-text: var(--primary); --nav-link-color: #1a2a3a; --nav-link-hover: var(--primary); --logo-color: var(--primary); --hero-gradient-from: var(--primary); --hero-gradient-to: var(--primary-dark); --hero-text: #ffffff; --hero-btn-bg: #ffffff; --hero-btn-text: var(--primary); --hero-btn-hover: var(--accent); --card-bg: #ffffff; --equipo-avatar-bg: var(--primary-light); --equipo-avatar-color: #999; --footer-text: #ffffff; --footer-text-muted: rgba(255,255,255,0.7); } /* --- RESTAURANTE (rojo vino + dorado) --- */ .sector-restaurante { --primary: #8b2c1a; --primary-light: #a83d2a; --primary-dark: #6b1f12; --accent: #d4a373; --accent-hover: #b8895c; --bg: #faf6f0; --bg-section: #f5e6d3; --bg-alt: #ffffff; --text: #3d2b1f; --text-light: #777777; --text-on-primary: #ffffff; --font-family: 'Georgia', 'Times New Roman', serif; --header-bg: #2c1810; --footer-bg: #2c1810; --radius: 8px; --shadow: 0 3px 20px rgba(0,0,0,0.08); --section-divider-h: 0; --section-divider-w: 0; --section-divider-content: '\u2726'; --section-divider-color: var(--primary); --header-text: #ffffff; --nav-link-color: #d4c5b0; --nav-link-hover: var(--accent); --logo-color: var(--accent); --hero-gradient: rgba(44,24,16,0.85), rgba(44,24,16,0.85); --hero-text: #ffffff; --hero-btn-bg: var(--accent); --hero-btn-text: #2c1810; --hero-btn-hover: var(--accent-hover); --card-bg: #ffffff; --equipo-avatar-bg: #ddd; --equipo-avatar-color: #999; --footer-text: #d4c5b0; --footer-text-muted: rgba(212,197,176,0.7); } /* --- ABOGADO (azul marino + dorado) --- */ .sector-abogado { --primary: #0a1628; --primary-light: #162544; --primary-dark: #060e1a; --accent: #c9a84c; --accent-hover: #e4c76b; --bg: #fafbfc; --bg-section: #f4f6fb; --bg-alt: #ffffff; --text: #333333; --text-light: #666666; --text-on-primary: #ffffff; --font-family: 'Palatino Linotype', 'Palatino', Georgia, serif; --header-bg: var(--primary); --footer-bg: var(--primary); --radius: 4px; --shadow: 0 2px 20px rgba(10,22,40,0.08); --section-divider-h: 2px; --section-divider-w: 80px; --section-divider-bg: var(--accent); --header-text: #ffffff; --nav-link-color: #a8b8cc; --nav-link-hover: var(--accent); --logo-color: var(--accent); --hero-gradient-from: var(--primary); --hero-gradient-to: var(--primary-light); --hero-text: #ffffff; --hero-btn-bg: transparent; --hero-btn-text: var(--accent); --hero-btn-hover-bg: var(--accent); --hero-btn-hover-text: var(--primary); --card-bg: #ffffff; --equipo-avatar-bg: var(--primary); --equipo-avatar-color: var(--accent); --footer-text: #a8b8cc; --footer-text-muted: rgba(168,184,204,0.8); } /* --- PELUQUERÍA (negro + rosa) --- */ .sector-peluqueria { --primary: #1a1a1a; --primary-light: #2d2d2d; --primary-dark: #000000; --accent: #e84393; --accent-hover: #f06292; --bg: #fcfcfc; --bg-section: #fce4ec; --bg-alt: #ffffff; --text: #333333; --text-light: #888888; --text-on-primary: #ffffff; --font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --header-bg: #ffffff; --footer-bg: var(--primary); --radius: 12px; --shadow: 0 3px 15px rgba(0,0,0,0.06); --section-divider-h: 3px; --section-divider-w: 40px; --section-divider-bg: var(--accent); --header-text: var(--primary); --nav-link-color: var(--primary); --nav-link-hover: var(--accent); --logo-color: var(--accent); --hero-gradient-from: var(--primary); --hero-gradient-to: #2d2d2d; --hero-text: #ffffff; --hero-btn-bg: var(--accent); --hero-btn-text: #ffffff; --hero-btn-hover: var(--accent-hover); --card-bg: #ffffff; --equipo-avatar-bg: #ddd; --equipo-avatar-color: #999; --footer-text: #aaaaaa; --footer-text-muted: rgba(170,170,170,0.7); } /* --- TIENDA (azul + naranja) --- */ .sector-tienda { --primary: #1a56db; --primary-light: #e8effd; --primary-dark: #1243af; --accent: #f97316; --accent-hover: #ea580c; --bg: #f8fafb; --bg-section: #f1f5f9; --bg-alt: #ffffff; --text: #1e293b; --text-light: #64748b; --text-on-primary: #ffffff; --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; --header-bg: #ffffff; --footer-bg: #0f172a; --radius: 10px; --shadow: 0 2px 12px rgba(0,0,0,0.07); --section-divider-h: 3px; --section-divider-w: 50px; --section-divider-bg: var(--accent); --header-text: var(--primary); --nav-link-color: var(--text); --nav-link-hover: var(--accent); --logo-color: var(--primary); --hero-gradient-from: #0f172a; --hero-gradient-to: var(--primary); --hero-text: #ffffff; --hero-btn-bg: var(--accent); --hero-btn-text: #ffffff; --hero-btn-hover: var(--accent-hover); --card-bg: #ffffff; --equipo-avatar-bg: var(--primary-light); --equipo-avatar-color: var(--primary); --footer-text: #cbd5e1; --footer-text-muted: rgba(203,213,225,0.6); } /* --- ACADEMIA (verde + azul) --- */ .sector-academia { --primary: #059669; --primary-light: #ecfdf5; --primary-dark: #047857; --accent: #3b82f6; --accent-hover: #2563eb; --bg: #f8fafc; --bg-section: #f0fdf4; --bg-alt: #ffffff; --text: #1e293b; --text-light: #64748b; --text-on-primary: #ffffff; --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; --header-bg: #ffffff; --footer-bg: #0f172a; --radius: 10px; --shadow: 0 2px 12px rgba(0,0,0,0.06); --section-divider-h: 3px; --section-divider-w: 50px; --section-divider-bg: var(--primary); --header-text: var(--primary); --nav-link-color: var(--text); --nav-link-hover: var(--primary); --logo-color: var(--primary); --hero-gradient-from: #0f172a; --hero-gradient-to: var(--primary); --hero-text: #ffffff; --hero-btn-bg: var(--accent); --hero-btn-text: #ffffff; --hero-btn-hover: var(--accent-hover); --card-bg: #ffffff; --equipo-avatar-bg: var(--primary-light); --equipo-avatar-color: var(--primary); --footer-text: #cbd5e1; --footer-text-muted: rgba(203,213,225,0.6); } /* --- REFORMAS (naranja + gris) --- */ .sector-reformas { --primary: #c2410c; --primary-light: #fff7ed; --primary-dark: #9a3412; --accent: #fb923c; --accent-hover: #f97316; --bg: #f5f5f4; --bg-section: #fef3c7; --bg-alt: #ffffff; --text: #292524; --text-light: #78716c; --text-on-primary: #ffffff; --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; --header-bg: #292524; --footer-bg: #292524; --radius: 8px; --shadow: 0 2px 12px rgba(0,0,0,0.08); --section-divider-h: 4px; --section-divider-w: 60px; --section-divider-bg: var(--accent); --header-text: #ffffff; --nav-link-color: #d6d3d1; --nav-link-hover: var(--accent); --logo-color: var(--accent); --hero-gradient-from: #292524; --hero-gradient-to: var(--primary); --hero-text: #ffffff; --hero-btn-bg: var(--accent); --hero-btn-text: #292524; --hero-btn-hover: var(--accent-hover); --card-bg: #ffffff; --equipo-avatar-bg: #e7e5e4; --equipo-avatar-color: #999; --footer-text: #d6d3d1; --footer-text-muted: rgba(214,211,209,0.7); } /* --- FONTANERO (azul + blanco) --- */ .sector-fontanero { --primary: #0369a1; --primary-light: #f0f9ff; --primary-dark: #075985; --accent: #0ea5e9; --accent-hover: #0284c7; --bg: #f0f9ff; --bg-section: #e0f2fe; --bg-alt: #ffffff; --text: #1e293b; --text-light: #64748b; --text-on-primary: #ffffff; --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; --header-bg: #0f172a; --footer-bg: #0f172a; --radius: 8px; --shadow: 0 2px 12px rgba(0,0,0,0.08); --section-divider-h: 4px; --section-divider-w: 50px; --section-divider-bg: var(--accent); --header-text: #ffffff; --nav-link-color: #94a3b8; --nav-link-hover: var(--accent); --logo-color: var(--accent); --hero-gradient-from: #0f172a; --hero-gradient-to: var(--primary); --hero-text: #ffffff; --hero-btn-bg: var(--accent); --hero-btn-text: #ffffff; --hero-btn-hover: var(--accent-hover); --card-bg: #ffffff; --equipo-avatar-bg: var(--primary-light); --equipo-avatar-color: var(--primary); --footer-text: #94a3b8; --footer-text-muted: rgba(148,163,184,0.7); } /* --- ÓPTICA (púrpura + azul) --- */ .sector-optica { --primary: #7c3aed; --primary-light: #f5f3ff; --primary-dark: #6d28d9; --accent: #06b6d4; --accent-hover: #0891b2; --bg: #faf5ff; --bg-section: #f0fdfa; --bg-alt: #ffffff; --text: #1e293b; --text-light: #64748b; --text-on-primary: #ffffff; --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; --header-bg: #ffffff; --footer-bg: #1e1b4b; --radius: 10px; --shadow: 0 2px 12px rgba(0,0,0,0.06); --section-divider-h: 3px; --section-divider-w: 50px; --section-divider-bg: var(--primary); --header-text: var(--primary); --nav-link-color: var(--text); --nav-link-hover: var(--primary); --logo-color: var(--primary); --hero-gradient-from: #1e1b4b; --hero-gradient-to: var(--primary); --hero-text: #ffffff; --hero-btn-bg: var(--accent); --hero-btn-text: #ffffff; --hero-btn-hover: var(--accent-hover); --card-bg: #ffffff; --equipo-avatar-bg: var(--primary-light); --equipo-avatar-color: var(--primary); --footer-text: #c7d2fe; --footer-text-muted: rgba(199,210,254,0.7); } /* --- HOTEL (teal + dorado) --- */ .sector-hotel { --primary: #0d9488; --primary-light: #f0fdfa; --primary-dark: #0f766e; --accent: #d4a373; --accent-hover: #b8895c; --bg: #fafaf9; --bg-section: #f0fdfa; --bg-alt: #ffffff; --text: #1c1917; --text-light: #78716c; --text-on-primary: #ffffff; --font-family: 'Georgia', 'Times New Roman', serif; --header-bg: #1c1917; --footer-bg: #1c1917; --radius: 8px; --shadow: 0 3px 18px rgba(0,0,0,0.07); --section-divider-h: 0; --section-divider-w: 0; --section-divider-content: '✦'; --section-divider-color: var(--accent); --header-text: #ffffff; --nav-link-color: #d6d3d1; --nav-link-hover: var(--accent); --logo-color: var(--accent); --hero-gradient: rgba(28,25,23,0.8), rgba(28,25,23,0.8); --hero-text: #ffffff; --hero-btn-bg: var(--accent); --hero-btn-text: #1c1917; --hero-btn-hover: var(--accent-hover); --card-bg: #ffffff; --equipo-avatar-bg: #ddd; --equipo-avatar-color: #999; --footer-text: #d6d3d1; --footer-text-muted: rgba(214,211,209,0.7); } /* ===== RESET & BASE ===== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-family, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif); line-height: 1.6; color: var(--text, #333); background: var(--bg, #f4f4f4); } img { max-width: 100%; height: auto; display: block; } a { text-decoration: none; color: inherit; } .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* ===== WHATSAPP FLOTANTE ===== */ .whatsapp-float { position: fixed; bottom: 25px; right: 25px; z-index: 999; width: 60px; height: 60px; background: #25D366; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4); transition: transform 0.3s ease; } .whatsapp-float:hover { transform: scale(1.1); } .whatsapp-float svg { width: 32px; height: 32px; fill: white; } /* ===== HEADER / NAV ===== */ .header { background: var(--header-bg, #1a1a1a); padding: 15px 0; position: sticky; top: 0; z-index: 100; box-shadow: var(--header-bg) === #ffffff ? 0 2px 10px rgba(0,0,0,0.05) : none; } .header .container { display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 1.5rem; font-weight: 800; color: var(--logo-color, var(--accent, #e87c2a)); } .logo span { color: var(--header-text, #ffffff); } .nav-links { display: flex; gap: 25px; list-style: none; } .nav-links a { color: var(--nav-link-color, #ffffff); font-weight: 500; font-size: 0.95rem; transition: color 0.3s; } .nav-links a:hover { color: var(--nav-link-hover, var(--accent)); } .menu-toggle { display: none; background: none; border: none; color: var(--header-text, white); font-size: 1.8rem; cursor: pointer; } /* ===== HERO ===== */ .hero { background: linear-gradient(135deg, var(--hero-gradient-from, #1a1a1a) 0%, var(--hero-gradient-to, var(--primary, #2d5016)) 100%); color: var(--hero-text, #ffffff); padding: 100px 0 80px; text-align: center; position: relative; overflow: hidden; } .hero h1 { font-size: 3rem; margin-bottom: 15px; font-weight: 800; } .hero h1 span { color: var(--accent, #e87c2a); } .hero p { font-size: 1.2rem; max-width: 600px; margin: 0 auto 30px; opacity: 0.9; } .hero-btn { display: inline-block; background: var(--hero-btn-bg, var(--accent)); color: var(--hero-btn-text, #ffffff); padding: 14px 40px; border-radius: var(--radius, 8px); font-weight: 700; font-size: 1.1rem; transition: all 0.3s; border: 0; cursor: pointer; } .hero-btn:hover { background: var(--hero-btn-hover, var(--accent-hover)); color: var(--hero-btn-text, #ffffff); } /* ===== SECCIONES GENERALES ===== */ .section { padding: 80px 0; } .section-title { text-align: center; font-size: 2.2rem; margin-bottom: 50px; color: var(--primary, #2d5016); font-weight: 700; } .section-title::after { content: ''; display: block; width: var(--section-divider-w, 60px); height: var(--section-divider-h, 4px); background: var(--section-divider-bg, var(--accent, #e87c2a)); margin: 12px auto 0; border-radius: 2px; } .bg-alt { background: var(--bg-section, #f9f9f9); } .bg-white { background: var(--bg-alt, #ffffff); } /* ===== SERVICIOS ===== */ .servicios-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; } .servicio-card { background: var(--card-bg, #ffffff); padding: 35px 25px; border-radius: var(--radius, 8px); text-align: center; box-shadow: var(--shadow, 0 2px 15px rgba(0,0,0,0.1)); transition: transform 0.3s, box-shadow 0.3s; } .servicio-card:hover { transform: translateY(-5px); box-shadow: 0 5px 25px rgba(0,0,0,0.15); } .servicio-icon { font-size: 3rem; margin-bottom: 15px; display: block; } .servicio-card h3 { color: var(--primary, #2d5016); margin-bottom: 10px; } .servicio-card p { color: var(--text-light, #666); font-size: 0.95rem; } /* Servicios con precio inline (peluquería) */ .servicio-card-precio { display: flex; justify-content: space-between; align-items: center; padding: 20px 25px; background: var(--card-bg, #ffffff); border-radius: var(--radius, 8px); box-shadow: var(--shadow, 0 2px 15px rgba(0,0,0,0.1)); transition: transform 0.3s; } .servicio-card-precio:hover { transform: translateX(5px); } .servicio-card-precio h3 { color: var(--primary, #2d5016); font-size: 1.05rem; margin-bottom: 4px; } .servicio-card-precio p { color: var(--text-light, #888); font-size: 0.85rem; margin: 0; } .servicio-card-precio .precio { font-size: 1.3rem; font-weight: 800; color: var(--accent, #e84393); white-space: nowrap; margin-left: 15px; } /* ===== GALERÍA ===== */ .galeria-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; } .galeria-item { position: relative; border-radius: var(--radius, 8px); overflow: hidden; aspect-ratio: 4/3; background: #ddd; } .galeria-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; } .galeria-item:hover img { transform: scale(1.05); } .galeria-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #e0e0e0; color: #999; font-size: 1.2rem; } /* ===== EQUIPO ===== */ .equipo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 30px; } .equipo-card { background: var(--card-bg, #ffffff); padding: 30px 20px; border-radius: var(--radius, 8px); text-align: center; box-shadow: var(--shadow, 0 2px 15px rgba(0,0,0,0.1)); transition: transform 0.3s; } .equipo-card:hover { transform: translateY(-5px); } .equipo-avatar { width: 120px; height: 120px; border-radius: 50%; background: var(--equipo-avatar-bg, #ddd); margin: 0 auto 15px; display: flex; align-items: center; justify-content: center; font-size: 3rem; color: var(--equipo-avatar-color, #999); } .equipo-card h3 { color: var(--primary, #2d5016); margin-bottom: 5px; } .equipo-card .cargo { color: var(--accent, #e87c2a); font-weight: 600; font-size: 0.9rem; } .equipo-card p { color: var(--text-light, #666); font-size: 0.9rem; margin-top: 10px; } /* ===== CARTA DIGITAL ===== */ .carta-categoria { margin-bottom: 40px; } .categoria-titulo { font-size: 1.5rem; color: var(--primary, #8b2c1a); margin-bottom: 20px; border-bottom: 2px solid var(--accent, #d4a373); padding-bottom: 8px; } .carta-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px dashed #ddd; } .carta-item:last-child { border-bottom: none; } .carta-item h4 { color: var(--text, #3d2b1f); margin-bottom: 4px; } .carta-item p { color: var(--text-light, #777); font-size: 0.9rem; } .carta-item .precio { font-weight: 700; color: var(--primary, #8b2c1a); font-size: 1.1rem; white-space: nowrap; margin-left: 15px; } /* ===== PRODUCTOS (tienda/óptica) ===== */ .productos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 25px; } .producto-card { background: var(--card-bg, #ffffff); border-radius: var(--radius, 8px); overflow: hidden; box-shadow: var(--shadow, 0 2px 15px rgba(0,0,0,0.1)); transition: transform 0.3s; } .producto-card:hover { transform: translateY(-5px); } .producto-img { aspect-ratio: 1/1; background: #f0f0f0; display: flex; align-items: center; justify-content: center; font-size: 4rem; } .producto-info { padding: 15px 20px 20px; } .producto-info h3 { color: var(--primary, #2d5016); margin-bottom: 5px; font-size: 1.05rem; } .producto-info p { color: var(--text-light, #666); font-size: 0.85rem; margin-bottom: 10px; } .producto-info .precio { font-size: 1.2rem; font-weight: 800; color: var(--accent, #e87c2a); } /* ===== RESEÑAS ===== */ .resenas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; } .resena-card { background: var(--card-bg, #ffffff); padding: 25px 30px; border-radius: var(--radius, 8px); box-shadow: var(--shadow, 0 2px 15px rgba(0,0,0,0.1)); position: relative; border-left: 4px solid var(--accent, #d4a373); } .resena-card p { font-style: italic; color: var(--text-light, #555); } .resena-autor { color: var(--primary, #2d5016); font-weight: 600; margin-top: 15px; font-style: normal; } .estrellas { color: #ffc107; font-size: 1.1rem; } /* ===== SOBRE NOSOTROS ===== */ .about-content { max-width: 800px; margin: 0 auto; text-align: center; font-size: 1.1rem; color: var(--text-light, #555); } .about-content p + p { margin-top: 20px; } /* ===== CONTACTO / MAPA ===== */ .contacto-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; } .contacto-info h3 { color: var(--primary, #2d5016); margin-bottom: 20px; } .contacto-info p { margin-bottom: 10px; color: var(--text-light, #555); } .contacto-info strong { color: var(--text, #333); } .contacto-info a { color: inherit; } .mapa-container { border-radius: var(--radius, 8px); overflow: hidden; box-shadow: var(--shadow, 0 2px 15px rgba(0,0,0,0.1)); } .mapa-container iframe { width: 100%; height: 350px; border: 0; } /* ===== RESERVA (peluquería) ===== */ .reserva-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; } .reserva-info h3 { color: var(--primary, #2d5016); margin-bottom: 15px; } .reserva-info p { color: var(--text-light, #555); margin-bottom: 10px; } .reserva-btns { display: flex; gap: 15px; flex-wrap: wrap; margin-top: 20px; } .reserva-btn { display: inline-block; padding: 14px 30px; border-radius: 50px; font-weight: 700; font-size: 1rem; transition: all 0.3s; border: none; cursor: pointer; } .reserva-btn-wa { background: #25D366; color: white; } .reserva-btn-wa:hover { background: #1da851; transform: translateY(-2px); } .reserva-btn-tel { background: var(--primary, #1a1a1a); color: white; } .reserva-btn-tel:hover { background: #333; transform: translateY(-2px); } /* ===== PRECIOS / TARIFAS ===== */ .precios-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 25px; } .precio-card { background: var(--card-bg, #ffffff); border-radius: var(--radius, 8px); padding: 35px 25px; text-align: center; box-shadow: var(--shadow, 0 2px 15px rgba(0,0,0,0.1)); transition: transform 0.3s; border-top: 4px solid var(--accent, #e87c2a); } .precio-card:hover { transform: translateY(-5px); } .precio-card.destacado { border-top-color: var(--accent, #e87c2a); transform: scale(1.03); } .precio-card.destacado:hover { transform: scale(1.03) translateY(-5px); } .precio-card h3 { color: var(--primary, #2d5016); margin-bottom: 10px; } .precio-card .precio-valor { font-size: 2.2rem; font-weight: 800; color: var(--accent, #e87c2a); margin: 15px 0; } .precio-card .precio-valor small { font-size: 1rem; font-weight: 400; } .precio-card ul { list-style: none; margin: 20px 0; } .precio-card ul li { padding: 8px 0; color: var(--text-light, #666); border-bottom: 1px solid #eee; } .precio-card ul li:last-child { border-bottom: none; } .precio-card .precio-btn { display: inline-block; background: var(--accent, #e87c2a); color: white; padding: 10px 30px; border-radius: var(--radius, 8px); font-weight: 600; transition: background 0.3s; } .precio-card .precio-btn:hover { background: var(--accent-hover, #d06e1f); } /* ===== FOOTER ===== */ .footer { background: var(--footer-bg, #1a1a1a); color: var(--footer-text, #ffffff); text-align: center; padding: 30px 0; } .footer p { font-size: 0.9rem; opacity: 0.7; } .footer p:last-child { margin-top: 8px; opacity: 0.5; font-size: 0.8rem; } .footer-brand { color: var(--accent, #e87c2a); font-weight: 700; } /* ===== RESPONSIVE (móvil primero) ===== */ @media (max-width: 768px) { .menu-toggle { display: block; } .nav-links { display: none; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--header-bg, #1a1a1a); padding: 20px; gap: 15px; box-shadow: 0 5px 10px rgba(0,0,0,0.1); } .nav-links.active { display: flex; } .header { position: relative; } .hero { padding: 60px 0 50px; } .hero h1 { font-size: 2rem; } .hero p { font-size: 1rem; } .section { padding: 50px 0; } .section-title { font-size: 1.8rem; } .servicios-grid, .galeria-grid, .equipo-grid, .resenas-grid, .productos-grid, .precios-grid { grid-template-columns: 1fr; } .contacto-grid, .reserva-grid { grid-template-columns: 1fr; } .carta-item { flex-direction: column; align-items: flex-start; gap: 5px; } .carta-item .precio { margin-left: 0; } .servicio-card-precio { flex-direction: column; text-align: center; } .servicio-card-precio .precio { margin-left: 0; margin-top: 10px; } } @media (max-width: 480px) { .hero h1 { font-size: 1.6rem; } .section-title { font-size: 1.5rem; } .hero-btn, .reserva-btn { padding: 12px 24px; font-size: 0.95rem; } .whatsapp-float { width: 50px; height: 50px; bottom: 15px; right: 15px; } .whatsapp-float svg { width: 26px; height: 26px; } }